Re: Limit 3 Blocks Per Row?

Solved

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

Dchan04
Excursionist
24 0 4

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. 

 

 

code.png

page.png

 

Accepted Solution (1)
BSS-Commerce
Shopify Partner
3477 463 547

This is an accepted solution.

Hi @Dchan04 

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

Instead, add the code flex-wrap: wrap;

view - 2023-01-11T134701.374.png

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 9 (9)

GemPages
Shopify Partner
5625 1262 1254

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Dchan04
Excursionist
24 0 4
Dchan04
Excursionist
24 0 4

 

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

BSS-Commerce
Shopify Partner
3477 463 547

Hi @Dchan04 

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

view - 2023-01-10T111910.651.png

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

view - 2023-01-10T111946.802.png

- Find the CSS file you need to edit:

view - 2023-01-10T112035.198.png

And save your work

view - 2023-01-10T112039.849.png

I hope that it will work for your site.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Dchan04
Excursionist
24 0 4

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. 

Screen Shot 2023-01-10 at 11.18.00 AM.png

Dchan04
Excursionist
24 0 4

Below is what i want it to look like:

 

Podcast Page 2.jpg

BSS-Commerce
Shopify Partner
3477 463 547

This is an accepted solution.

Hi @Dchan04 

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

Instead, add the code flex-wrap: wrap;

view - 2023-01-11T134701.374.png

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-Commerce
Shopify Partner
3477 463 547

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Dchan04
Excursionist
24 0 4

www.shopinhouse.com

 

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