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!!
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?
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
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