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? 
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 
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 
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 
++ some great info on Object-fit here:
Hope this helps! But feel let me know if this isn’t what you’re after
Thank you so much! I changed the fit to cover and now it works perfect
