I am having trouble with this blog page, I tried to create a square with background colour but it seems that the alignment is off
It’s locate don the blog page
Here is my site Read-Only: https://preview.webflow.com/preview/footprints-counselling-service?preview=a4e2803df15f2661f2580097b3095b0a
(how to share your site Read-Only link)
Hi,
you can do it a few ways but I would start with Section 11. Give this a flexbox position “center”. Check “wrap children”
Make each of your “collection item” divs 33.333%, and remove the float right property. Remove the position property. Make these collection item divs flexbox center.
this should get you centered up.
For the smaller viewports, you can change the “collection items” divs from 33.33% to 50% to make them 2/row, then 100% on phone view to make them single.
Thanks, where exactly do I enter the 33.333% and do I remove the sizes on the divblock 8?
In the width property field for the “Collection Item” div. See screen grab.
You can change the fixed pixel width on “divblock 8” but they won’t be perfectly square. Really depends on how you want them to look.
I’ve added another screen grab below. You’ll want to remove any float changes completely and keep the default (which is float left). I apologize, in my previous post I said to remove float… but I should have said to click on the blue word “float” and then click “remove this style” 
