I’m using a component for a fixed header and for bigger screens (>1440), the instance used in my About page looks subtly displaced in the y-axis in comparison with my Home or Project page instances.
I’ve checked every page, every element and even started from scratch but still it is not placed properly. It may be something quite simple but I truly don’t know what I’m missing
hi @MikeNohales it took me like 30min to find this mystery and it is related to “current” state where you have some settings. When both pages have w–current` jump will vanish. Check the video rest is on you.
I kept digging around the automatic “Current” state and still wasn’t sure about what went wrong… so I ended up discovering that, only for the About page, the line-height variable used for the link “About” is actually a deleted variable with an outdated value that still appears in my CSS and overwrites the right variable
I have no idea for now how to solve the variable issue but I would be really grateful for some help while I keep trying.
I understand this may be a very unique situation but, just in case someone is having something similar going on… here is what I found so far:
I used Finsweet’s “Fluent design generator” for my type scale across breakpoints and, at some point (cannot remember when), I decided to erase an entire Webflow breakpoint for screens above 1920 (you can do it with Finsweet) despite the fact of having a breakpoint defined in the type scale.
At the time, apparently nothing is broken but the fact is that by deleting a breakpoint, some old outdated and deleted variables kept linked to some classes and therefore, kept popping up in the CSS disturbing my peace.
So… after discovering all this (self-inflicted) mess I restored the breakpoint to match the ones defined in Finsweet’s type scale, re-linked the variables correctly and the rusty variables and its undesired effects disappeared.
