Define how many columns will be inside a Custom Module
SOLVE
This is actually really simple in the new Design Manager.
Create a custom Module with 4 fields..
A Text Module (This will be the title)
A Rich tect module for the paragraph.
Create group that contains: Image Module and Text Module and make that repeatable.
Then you will use flex-box to align the icons in a row. No Mater how many there are.
<div class="wrapper">
<h2>Title</h2>
<div class="paragraph">Paragraph text here</div>
<div class="flex-box-wrapper">
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
</div>
</div>
<style>
.flex-box-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-item {
flex: 1;
max-width: 20%;
padding: 1rem;
}
</style>
After that you need to make the responsive bits so it breaks well on mobile and such.. Perferably mobile first if you can.
@ChadP's answer is pretty much what I would go with but I would like to add to it.
Flexbox isn't natively supported by most browsers so you have to use prefixes on flexbox css attributes.
You definetely want to create the necessary field, I believe an image and text module in your case, and you want to group them and make that group repeatable like @ChadP has suggested.
I wouldn't set a max-width on the flexed items though. At best it will cause the items to align the the left side of the page. If the max-width is 20% then you would need 5 items to fill the page, any less and the missing items space would be empty on the right side. That is provided that width controls work on flexed items and I do not believe that it does.
I added a class to the parent element starting with 'child_' and appended the number of items in the item collection "children" to it so the class will change with the number of items, i.e. "child_1", child_2" etc.
Then you can change the width of the parent based on the number of items and set the parent to left and right margins "auto" to center it.
Define how many columns will be inside a Custom Module
SOLVE
This is actually really simple in the new Design Manager.
Create a custom Module with 4 fields..
A Text Module (This will be the title)
A Rich tect module for the paragraph.
Create group that contains: Image Module and Text Module and make that repeatable.
Then you will use flex-box to align the icons in a row. No Mater how many there are.
<div class="wrapper">
<h2>Title</h2>
<div class="paragraph">Paragraph text here</div>
<div class="flex-box-wrapper">
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
<div class="flex-item">Image and text in here</div>
</div>
</div>
<style>
.flex-box-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-item {
flex: 1;
max-width: 20%;
padding: 1rem;
}
</style>
After that you need to make the responsive bits so it breaks well on mobile and such.. Perferably mobile first if you can.