Hi there,
I’m using the Grid theme and would like my products to appear in two columns on mobile view. Currently it’s a long list of a single column which isn’t very user-friendly. Please help, thank you so much.
- Here is the solution for you @cindysmk
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media (max-width: 769px) {
.rows-of-4 .product-list-item{
width: 50% !important;
}
.collection-products.rows-of-4 {
display: grid !important;
grid-template-columns: auto auto !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hi @cindysmk ,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the theme.css (or base.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
@media screen and (max-width: 539px) {
.collection-products {
/* background: yellow; */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
height: 100% !important;
}
.collection-products .product-list-item {
position: static !important;
}
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
Amazing, this worked. Thank you so much!