Collection page side by side image on mobile

Technical Q&A
,
1

Hi, my collection page is showing the products 1 by 1 (refer image 1) in mobile. I need 2 products in a row (refer image 2) in collection page. Currently, I did a custom CSS in home page so I got what I wanted there but collection page seems different.

I tried following code but shrink the whole page (refer image 3)

@media only screen and (max-width:500px) {

.collection-grid {
width: 50%;
} }

Need help, thanks in advance.

Website link - https://straight-studio.com/collections/hair-care

I am using Savon theme.

Theme Link - https://savon-theme.myshopify.com/

image 1

StraightSample_1-1686824989513.png
StraightSample_1-1686824989513.png397×609 39.2 KB

image 2

StraightSample_2-1686825020320.png
StraightSample_2-1686825020320.png413×559 41.1 KB

image 3

StraightSample_3-1686825110197.png
StraightSample_3-1686825110197.png454×607 35.1 KB

2

@StraightSample , Please add the below line of CSS code at the end of your dt.framework.css file.

@media(max-width:576px){
.template-collection .grid.product-collection{
    grid-template-columns: repeat(2,1fr);
}
}

I hope above code will work fine for you.

1 Like
3

Thank you so much, it worked!