Sections overlapping on Tablet, but not actually IN Webflow

[onawave (Dustin McLean)]

Hello there.

So I have two sections on my little portfolio site, that are overlapping each other when I view it live on my iPad. The ‘Tools & Technologies’ section, which is a little grid of icons, overlaps the next section, which is a call to action thingy. With the call to action on top of the icon grid.

But in Webflow, it doesn’t overlap at all. And it seems that no matter how much top margin on the call to action, or bottom margin on the icon grid I have, it still overlaps in the same way. So clearly I’m missing something. But in preview mode in Webflow, it looks fine.

I’m still mostly a beginner with this stuff, but I’m working hard to get a handle on it. So I really appreciate any help!

Cheers!

Here is my site Read-Only: Webflow - Strange Island Creative

[j0vil (Jovil Hiew)]

The issue is caused by the line-height set on icon-container. I recommend that you don’t use the unit vw to define your line-height as it will change based on the width of your viewport. Update it and use - instead and you should be fine.