envy collection list

Solved
mzdeitz
Excursionist
30 1 22

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?

IMG_2026.jpeg

 

 

Accepted Solutions (2)

Accepted Solutions
KetanKumar
Shopify Partner
24911 2497 9034

This is an accepted solution.

@mzdeitz 

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;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

mzdeitz
Excursionist
30 1 22

This is an accepted solution.

thank you so much!!!!

View solution in original post

Replies 9 (9)
KetanKumar
Shopify Partner
24911 2497 9034

@mzdeitz 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mzdeitz
Excursionist
30 1 22

Thewitchesmark.com

KetanKumar
Shopify Partner
24911 2497 9034

@mzdeitz 

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%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mzdeitz
Excursionist
30 1 22

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. 

KetanKumar
Shopify Partner
24911 2497 9034

@mzdeitz 

yes that code work only for mobile design doesn't effect on desktop don't worry 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mzdeitz
Excursionist
30 1 22
Yes, I put the code in but it is showing rows of three in mobile. I would
like rows of only two on my mobile version so my images are bigger. Thank
you.
KetanKumar
Shopify Partner
24911 2497 9034

This is an accepted solution.

@mzdeitz 

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;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

mzdeitz
Excursionist
30 1 22

This is an accepted solution.

thank you so much!!!!

View solution in original post

KetanKumar
Shopify Partner
24911 2497 9034

@mzdeitz 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing