Shopify themes, liquid, logos, and UX
I made some code customization only for mobile devices and now I can't change the amount of rows in desktop and I have these giant images
@media only screen and (max-width: 767px) {
.collection-list {
grid-template-columns: 33% 33% 33%;
justify-content: space-around;
} */
}
What code customization did you make?
@media only screen and (max-width: 767px) {
.collection-list {
grid-template-columns: 33% 33% 33%;
justify-content: space-around;
} */
}
Just took a look at your website, and the items seem to be 5 in a row now. Are you still facing this issue?
Please try to remove */ in your code and check again
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
does not work 😞
Hi @zakuntsart
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
@media screen and (min-width: 1000px){
#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(5, minmax(0, 1fr)) !important;}
}
@media screen and (min-width: 700px){
#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(4, minmax(0, 1fr)) !important;}
}
@media screen and (max-width: 699px){
#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(2, minmax(0, 1fr)) !important;}
}
Regards,
San
If it’s helpful to you, please mark it as a solution.
Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin
almost works, but not all the collections are affected, some of them still have only 3 in row
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025