Misalignment of divs on mobile


I’m having some misalignment issues when viewing my link on my iphone (however when previewing in webflow, there are no issues).

Here is what it looks like on my iphone

Any ideas on how to fix this?

Thanks in advance!

Everything appears to be in order; please share the iPhone screen shot as an image here; this link is not accessible to me.

try this

@media screen and (max-width: 479px)

.header-title-linkblock.w--current { display: flex; align-items: center; }

@shersials here is the screenshot:


For your solution, is there a no-code solution to that? I’m just unsure where to put that. Thanks

I found the solution with the help of someone on webflow. The issue was the font I was using. It had a vertical height issue and it automatically added some spacing beneath the font, thus it was misaligned.

Worth noting that PC and Macs view the fonts differently, so I was unable to see the issue on my desktop (PC), but the issue was popping up on my iphone.

In any case, if you encounter a font like this, go to https://transfonter.org/ , select “Fix Vertical Metrics” and then upload your new font into webflow. That worked for me