Logo changing size across breakpoints even when clearing styling

Design help General
1

I can’t figure out why my logo or brand in webflow is changing sizes across breakpoints (from tablet to mobile). There are no blue dots (aka it is inheriting everything from the upper classes) in any of the lower media queries right now so I don’t understand what could be changing it’s sizes. I’ve checked all of the div blocks that have anything to do with the logo.

What I’m trying to accomplish:
The reason this is a problem is because on page load I have a hero animation that scales from the center into the logo on the nav bar. Currently I have both of them up there for the purpose of the demonstration but eventually I will animate the display settings to none on the animated logo so the navbar becomes clickable. However, because the logo in my nav bar changes sizes across media queries the transition isn’t seamless for mobile.

Here is my site Read-Only: https://preview.webflow.com/preview/cloud-thirds?utm_source=cloud-thirds&preview=952763beb8d2c9566198e768eb090dfd

2

Yeah, that’s because you ahve used the default logo wrapper which has some pre-applied styles. Just create your own link div and give it the same class you have used for your logo wrapper (brandclass). It won’t jump around.

The reason it did is because the default link div sneakily adds 10px left padding on mobile landscape breakpoint.

2 Likes
3

Thank you! This fixed it. I never would have found that on my own.

4

You are welcome! This is something I’ve been struggling with a couple of years ago. I was pretty pissed to finally learn of behavior of this saboteur of a div that is the default logo wrapper :smiley: