How to show 2 products per row on mobile using the Berlin theme?

[primarymenswear]

hi i am using berlin theme and would like my website to show 2 products per row on mobile how do i do this?- pirmarymenswear.com

[niraj_patel]

Hello @primarymenswear 

[primarymenswear]

sorry, its primarymenswear.com

[Made4uo-Ribe · Accepted solution]

Hi @primarymenswear 

Do you mean in your collection right? 

Like this?

But youll have a problem in the smaller screen. 

If you like all the way here is the code. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.collection-product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

And save. 
If you like with the limit: 

@media screen and (min-width: 400px) and (max-width: 749px) {
.collection-product-list {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
}
}

And save. 

It will come back to 1 products in on smaller screen. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Challenger]

Hi Mate, Thanks for helping. Unfortunately, it didn't work for.

[Made4uo-Ribe]

What do you mean? it doesnt work after 6months? 

[Challenger]

Yeah I just tried the instructions yesterday, and it didn't work for me

[Made4uo-Ribe]

Oh, sorry for the confusion. I assumed it was the same author. It’s possible that our solution might not work for your store due to different themes. Could you please share your store URL so I can take a look? Thanks!

[PageFly-Oliver]

Hi @primarymenswear ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media(max-width:767px){
#ProductGridContainer .collection-product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly