Symbol appearing differently on different pages?

Design help Animations & Interactions
1

On mobile, for example, the our work page, the menu appears cluttered and incorrect, like shown:
Screen Shot 2022-09-13 at 11.20.59 AM

but it should look like this, like on the home page:
Screen Shot 2022-09-13 at 11.20.30 AM

These are both the same symbol, so I’m not sure why they’re appearing differently? I’ve inspected the heck out of it and can find no difference between the 2.

Please help!

Thank you

link: Our Work Mobile

share link:
https://preview.webflow.com/preview/atnn-design?utm_medium=preview_link&utm_source=designer&utm_content=atnn-design&preview=cac6c165272f971edf2e6091ec85e699&pageId=631f510cfc0f433d008e72f8&workflow=preview

2

You have defined width and height of the orangy cloud in EM. EM are set based on their parents’ font size, so even though the element is in a symbol, its dimensions can vary from a page to another depending on how their parents’ font sizes are set.

Instead of EM, use REM or PX. PX is absolute and REM only depends on what’s set on the HTML element. (16px)

3

wonderful! i will fix that. thank you!

1 Like