I’m using pipeline theme 6.0 and on the home page there’s a collection list that shows 2 collections/images per row on desktop. However, when in mobile view it shows only 1 per row. How can I make it so that it shows 2 collections per row on mobile version as well?
here’s the preview link url: https://kaicollections.com/?_ab=0&_fd=0&_sc=1
your help is very much appreciated..
@karimsafadi hello
Did you try customize > collection product grid settings?
yes, the settings for # products per row only applies for desktop mode.
@karimsafadi try this css in theme.scss.css
@media only screen and (max-width: 768px) {
.large–one-half {
width: 50%;
}
}
Didn’t work unfortunately
Did you add the css? cant see it on the file
i deleted it once i saw that it didn’t work on the front end
Can you put again and let me check?
Hi @karimsafadi ,
You can follow the instruction below:
#shopify-section-index-collection-grid .grid-uniform .grid__item {
width: 50%;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Hi There,
I don’t have Asset->/theme.scss available on my store
I have however, theme.dev.css available in my assets. Would that work to place the code there?
Hello,
i use the same theme, the theme.scss does not exist in the newest Pipeline Version. Do you have another possibility?
Hi,
did you find anything else? I struggle with the same problem, I know a shopify store with pipeline theme, that has 2 collection rows on mobile version, but I’m not sure if they use an app or a code solution.
Hi @karimsafadi , @SoLu
Currently I see the link you sent is using the theme.scss file. Not sure if it’s the sour code you’re trying to change? If not, can you send me a preview link of the sour code you want to edit, so I can check it for you
Thanks you
