Hello Devs,
I recently made a new page listing all the brands in my store. However, although it did as mentioned, I cannot seem to split the single column into multiple ones (4-5 columns). I had added column-count and data-columns attributes but it doesn’t seem to change regardless if I add a single one or both. Any help or assistance would be much welcomed.
There are over 20 brands for this store so having a single column isn’t really optimal if the customer has to scroll forever to see all companies.
My store page:
https://inailsupply.com/pages/brands
Best,
iNail Team
Hi @inailuser987 !
You can try the following steps:
1- In theme → Online Store → Action → Edit code →
2- Go to the Asstes → open screen**.css or theme.css** file and paste the following code at the bottom of file.
ul.block-grid.mobile.four-up.product-collection {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 30px;
}
Kindly accept the solution if it helps you!
Hello @inailuser987 ,
Welcome to Shopify Community !
To split the single column into multiple columns using CSS, you can use the column-width property to set the width of the columns.
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid theme file.
-
Paste the below code before :
ul.block-grid.mobile.four-up.product-collection {
column-width: 200px;
column-gap: 16px;
}
I tested it on my end and this is how it should look after implementing the CSS :
Thank you! The solution worked.
Solution worked! Thank you as well
Glad to help @inailuser987 
