I’m new to Webflow and I’ve been working on a website. I was utilizing grid functionality and everything was working and looking great, until it wasn’t. I don’t know what I did, but I can’t get rid of the space that’s in between the left and right columns. I want all the squares to fit flush against each other including when the screen size is expanded. The only time it should change is on mobile (vertical) where the four squares become stacked.
The spacing issue is as a result of using the ‘Container’ element as a ‘wrapper’ for the images and text.
Use a standard div and it should resolve the issue.
When testing I noticed an issues with the PGF image sizing, so you will need to delete the px width setting on the image itself so that it will stay consistent with other images.
@knk Thank you very much for the feedback, and the catch on the image size I truly appreciate it. I did as you stated and it appears to have worked, the only issue is now I’m getting this white space between the first and second row. Not sure what’s causing it.
You’re welcome, good to see that one problem solved, but not good it created another!
I had a look at some of the styling within the grid elements, and It appears a number of things are happening; namely using padding (+ / -) can have unexpected results when trying to design responsively.
Everyone approaches things differently, but I’m happy to record a video to demonstrate how I might approach it if you like.
Thank you so much for your help, the order of operations is crucial. I can’t wait till I get better at this. Very much appreciated. I will let you know if I have any other issues.
