Hi there, I would like to know if there is a code to make the two-column layout on mobile into a three-column row - so its not stacking two by two but instead three by three.
Any help is appreciated!
Hi @jay113
There are many pieces of code that can do this, however, we cannot be sure that the code will work for your case since we do not know what you want to divide the column for, which theme you are using, and where you want to make the division.
Please provide us with a link to your store and the location you want to edit (or an image if available), so that we can assist you.
Hi @jay113 ,
Can you share your store url
On the homepage, the second section. Wanting to move these two columns into 3 columns, please
Thank you for your help
on mobile only
Hi @jay113
This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:
- Online Store → Themes → Edit code:
- Find the file base.css and add this code at the end of the file and click Save:
@media screen and (max-width: 749px){
.multicolumn-list .grid__item {
width: calc(30% - var(--grid-desktop-horizontal-spacing) / 2) !important;
}
.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info{
padding-left: 0 !important;
padding-right: 0 !important;
}
.multicolumn-card__info h3 {
font-size: 1.7rem !important;
}
}
Result
Note: You can customize the size of the text to be larger or smaller in the font-size property as you like.
Hope this helps you.
BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert
Level up your Shopify store with our B2B & B2C apps