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
Topic summary
A user seeks to display 2 products per row on mobile devices using Shopify’s Berlin theme, instead of the default single-column layout.
Proposed Solution:
A community member provides CSS code to be added to the theme’s stylesheet (base.css, style.css, or theme.css):
- The code uses CSS Grid with
grid-template-columns: 1fr 1frwithin a media query targeting mobile screens (400px-749px width) - Targets the
.collection-product-listclass - Includes a note that very small screens will revert to 1 product per row
Current Status:
The discussion remains unresolved. A different user later reports that the provided solution did not work for their store when tested. The helper acknowledges this may be due to theme differences and requests the store URL to investigate further. The original poster has not confirmed whether the solution worked for them.
1 Like
Hello @primarymenswear
sorry, its primarymenswear.com
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!
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
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Hi Mate, Thanks for helping. Unfortunately, it didn’t work for.
What do you mean? it doesnt work after 6months?
Yeah I just tried the instructions yesterday, and it didn’t work for me
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!