Looking for some help on how to properly position text menu items as a “group” and keep it consistent at different screen sizes.
In addition, currently the layout in the designer and live site don’t match (screenshots below).
I want to keep the same distance between the elements regardless of screen size so that it stays “grouped”.
I would ideally like the whole “group” to scale with screen size; with the elements staying the same relative distance from one another. Essentially behaving as a scaling image.
I’ve tried various size units (vw, em, px) and positioning options with no success so far.
Others in the community may know a better answer but I thought of a work-around that could be useful; import the group of words as an single SVG file. I’ll explain.
Unlike a JPEG, SVG files doesn’t have pixels, so it can scale up and down without loosing quality. It will also maintain the same proportions between words since it’s all one image.
I went ahead and tested it out and it seems to scale up and down as expected. Check it out here: https://vast-bb1f22.webflow.io/
Adobe Illustrator can export SVGs and I think Figma can too.
Thank you very much for your response and idea. What you’ve suggested works great and scales perfectly as you say (I just tried it too).
However, because this is a menu. If I use an svg file rather than text, I’m assuming I won’t be able to add separate links or hover interactions to each word?
