How can I limit my custom section to three blocks per row?

[Dchan04]

Hi, I am working on coding out a custom section for a page on my site. As per the screenshot below, I want it so that there are 3 blocks per row. However, the way my code is set up right now, if I add a 4th block it just adds it to the row, instead of starting a new row. I have attached screenshots of the HTML code for the section, as well as a screenshot of what the page looks like with the 3 blocks in a row. Any advice on what code edits I need to make it so that there are 3 blocks per row and starts a new row if there is already 3 blocks in the previous one.

[GemPages]

Hello @Dchan04

Can you give me your page URL( with pass if your store password is enabled) so I can check it and maybe give you a solution?

Kind & Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @Dchan04

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

[Dchan04]

www.shopinhouse.com

[Dchan04]

www.shopinhouse.com

www.shopinhouse.com/pages/podcast is the page I am having problems with.

[Dchan04]

www.shopinhouse.com/pages/podcast is the page I am having problems with.

[BSS-Commerce]

Hi @Dchan04

• For your requirement, I tried adding a new value:

• You can add or omit new values your way, then go to Theme > Edit Code:

• Find the CSS file you need to edit:

And save your work

I hope that it will work for your site.

[Dchan04]

Hi, that makes it so that all the blocks are in a column. I want it so that after 3 blocks per row, it starts a new row of 3 blocks. The screenshot attached is what your edits made it look like.

[Dchan04]

Below is what i want it to look like:

[BSS-Commerce]

Hi @Dchan04

You can omit the code: flex-direction: column;

Instead, add the code flex-wrap: wrap;


I hope that it will work for you.