Grid going off page in iPad & Mobile

I’m fixing up the responsiveness of my website and having trouble with the grid. It’s going off the page from iPad downwards. I have used Systemflow as a template but manipulated it to suit my design. I feel like the issue may be that I’ve set the boxes to 282px W&H because I want them to stay square, I can’t seem to find a way to fix it if you could help please!!

Here is my site Read-Only: LINK Webflow - Vista Group
(how to share your site Read-Only link)

Hey Toni,

Did you manage to solve this in the mean time? :relaxed: Upon looking at your Read-only link, this behaviour is not occurring on my end - with the Grid content rendering perfectly within the viewport without any overflow :raised_hands:

Here’s a screenshot of what i’m seeing:

Hey Josh, thanks for replying!

Ah yes, I worked out that I needed to export the logos as a png in a square to the correct square size from Figma. I’m still learning so I don’t think it’s possible to define the shape of a div block with a floating image inside?

Hey Toni,

Not a problem! If I understand your question correctly, you could achieve this by defining the size of div block with an image inside just by setting its Width/Height values (E.G. 40vw x 40vw for a small square).

You could then set the image Width/Height to 100% which would mean that its size is determined by its parent element (the Div - which is set to be a square). If you then set the image’s fit property to be Cover then the image should sit nicely inside and maintain the square shape as defined by the parent Div :slight_smile:

Like this:

Since you’re using Grid there’s also a great tutorial on this over on the University: [TIMESTAMPED VIDEO] Auto Position (using an image grid) | Webflow Youtube :arrow_upper_right:

++ some great info on Object-fit here:

Hope this helps! But feel let me know if this isn’t what you’re after :raised_hands:

1 Like

Thank you so much! I changed the fit to cover and now it works perfect :slight_smile:

1 Like