Grid rendering broken on mobile

Hi folks,

I have a rendering issue on mobile with Grid I can’t get my head around.

When I working in the designer and checking on mobile view both in designer and with the rendering engine with Chrome Developer tools, what I see is fine :

FireShot Capture 501 - Domaine les Grands Gîtes du Perigord _ - https___www.domaine-les-grands-git.png

However, one the published site, the layout is broken and elements in the Grid overlap with spacing being broken and text going all over the image :

IMG_20C598BA69A6-1.jpeg

Does anyone have a clue what’s could be causing this ?

The page in the screenshot is the following : Domaine les Grands Gîtes du Perigord - Dordogne | A propos

Readonly link to project is here :slight_smile: ttps://preview.webflow.com/preview/les-grands-gites-du-perigord-maquette-1?utm_medium=preview_link&utm_source=designer&utm_content=les-grands-gites-du-perigord-maquette-1&preview=d92a8990a0863928337cb075b1c298bf&pageId=5ef74bcbd727ea07c23ff827&mode=preview

I’m not able to see your screenshots so unfortunately I’m not sure what issue you’re seeing on your end. I am noticing that your sections could use some adjustment for the larger-end of the mobile breakpoint (as shown below) and confirmed it looks similar in the Designer:


Hi @mikeyevin,

Thanks for taking the time looking into this mate, that’s much appreciated. We’ve narrowed down that the problem is iOS specific, so if you check this on Android, you won’t see it.

As it looks to be a Webflow product issue, the Webflow support team have picked it up and are looking into it. I’ll let you know what the outcome is.

But thanks again for taking the time to look into this.

1 Like

So just in case someone faces the same problem at some point:
Webflow support found out that the class used was somehow corrupted. Removing the class and creating a new one (even with identical settings) solved the issue.

1 Like