[NEED HELP] Simple FEATURES (SECTION)

Hey guys! Just getting my feet wet and learning webflow as much as possible. I had a simple question was wondering if you can help me with.

How do I create a section on my webpage where I can have “Text and Icons” next to the text to create a features section.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Take a look at the features section on this sample page:

https://preview.webflow.com/preview/testing-a7766d?utm_medium=preview_link&utm_source=designer&utm_content=testing-a7766d&preview=d29d876a5c9b2d01f435ef5cf3044c71&mode=preview

You could also use a grid, depends on if you need to support IE11, but both will work. If you don’t need IE11 support grid is probably better in this scenario as you can control spacing between items a bit better.

Was able to create a mockup from the one you provided above. How do I center this in the middle of the page?

The parent of the feature blocks needs to be set to display flex with center alignment, or you can use the old margin: 0 auto method which will work with another display setting. The container on my example page (which is from a Webflow template) uses the margin setting:

image

Not sure if i’m fully understanding. I believe I have it centered on each parent block. Sending over screenshots of each block.

It needs to be on the parent of the container in your first screenshot, so in this case the section if you are going to use the flexbox approach.

What exactly do I adjust on the SECTION parent.

Set it to display flex and then justify center. You can also share your ready only link, makes this easier to help out with.

Ah gotcha, That worked for centering the text.
Now how do I stack the features from 3 on each row.
Like how you have the features stacked from top to bottom.
Every time I copy and paste the features they stack left-right how do I stack
a certain number for each row like if I wanted 4 or 3 features each row stacking down.

https://preview.webflow.com/preview/mc-market-matt?utm_medium=preview_link&utm_source=dashboard&utm_content=mc-market-matt&preview=fd185e0704885a7fa9fa59d2db5b7149&mode=preview

Set a flex basis of 33.3333% on the Features Tab

image

And turn on wrap on the Container:

Awesome! Worked like a charm, Much love!


Have some strange bug now where my image/icons are disappearing.