Streaming live at 10am (PST)

Alightment and colour issues


#1

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

  1. I can’t seem to figure out why I cant centre it
  2. Am I creating the squares in the best way?

It’s locate don the blog page

Sharelink
https://preview.webflow.com/preview/footprints-counselling-service?preview=a4e2803df15f2661f2580097b3095b0a


Here is my site Read-Only: https://preview.webflow.com/preview/footprints-counselling-service?preview=a4e2803df15f2661f2580097b3095b0a
(how to share your site Read-Only link)


#2

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.


#3

Thanks, where exactly do I enter the 33.333% and do I remove the sizes on the divblock 8?


#4

In the width property field for the “Collection Item” div. See screen grab.
width

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” :slight_smile: