Grid theme - multiple columns on mobile view

[cindysmk]

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. 

https://skinjunction.au 

[BSS-TekLabs]

- 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.

[BSS-TekLabs · Accepted solution]

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!

[cindysmk]

Amazing, this worked. Thank you so much!