Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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.
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
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
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.
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
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.
Below is what i want it to look like:
This is an accepted solution.
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.
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
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024