Shopify themes, liquid, logos, and UX
Hello,
On my desktop version it shows two rows of 3. But in my mobile it shows two rows of two and then two rows of one. how can I resolve this to 3 rows of two on mobile?
Solved! Go to the solution
This is an accepted solution.
Yes, please update this code
@media (max-width: 767px) {
.collection-grid .row {
display: flex;
flex-wrap: wrap;
}
.collection-grid .col-sm-4 {
width: 50%;
padding: 0px 10px;
}
}
This is an accepted solution.
thank you so much!!!!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thewitchesmark.com
thanks for url, yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/style.scss ->paste below code at the bottom of the file.
@media (max-width: 767px) {
.collection-grid .col-sm-4 {
width: 33.33333333%;
}
}
Thank you! Is there a way to make rows of two instead of three on mobile? I would I like like this change made in the mobile version only. The desktop version I would like to remain rows of 3.
yes that code work only for mobile design doesn't effect on desktop don't worry
This is an accepted solution.
Yes, please update this code
@media (max-width: 767px) {
.collection-grid .row {
display: flex;
flex-wrap: wrap;
}
.collection-grid .col-sm-4 {
width: 50%;
padding: 0px 10px;
}
}
This is an accepted solution.
thank you so much!!!!
its my pleasure to help us
User | RANK |
---|---|
145 | |
97 | |
76 | |
69 | |
68 |
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023