How to have 2 columns for product list on mobile?

Technical Q&A
, ,
1

Hello, I am hoping to have 2 columns for my product list page when viewed in mobile. What code should I be using? My website is:

thanks!!

2

Hi @ishak123

Maybe you want to the result like this, right?

BSSCommerce_2-1684210587999.png
BSSCommerce_2-1684210587999.png426×868 264 KB

To do this, the code that can do that is in the stylesheet.css file in the assets folder

BSSCommerce_4-1684210642363.png
BSSCommerce_4-1684210642363.png1542×450 222 KB

To fix it, you can follow the instructions below

Step 1: Go to Themes → Edit Code

BSSCommerce_5-1684210656673.png
BSSCommerce_5-1684210656673.png1895×878 141 KB

Step 2: Find the file named stylesheet.css (Note the assets folder)

Step 3: In the stylesheet.css file, find the below css code

@media screen and (max-width: 739px)
.gridlock .row .mobile-3 {
    width: 97.91666667%;
}

Fix the value 97.91666667 to 47.91666667.

Hop this suggestion can help you.

3

Thank you for your response. It sort of works but now the page header is not aligned properly, and it also changed the grid on the homepage. Please advise. Thank you!

4

Basically it is making all the pages into 2 grids. I only want the products to be in 2 colomns.

5

It affected pages other than product pages, I’m sorry. Now let’s keep the previous number 97.91666667, as if we haven’t fixed anything. This helps to preserve the original grid structure of all pages.

The below css will only affect the product page

In the stylesheet.css file, find the below css:

@media screen and (max-width: 739px) {
    // css snippet to add
}

Add this css inside

.gridlock #product-loop .product-index {
     width: 47.91666667% !imporant;
}

Hope this helps you.