How can I adjust my Envy collection list for optimal mobile display?

[mzdeitz]

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?

[KetanKumar · 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;
}
}

[KetanKumar]

@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.

[mzdeitz]

Thewitchesmark.com

[KetanKumar]

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

[mzdeitz]

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]

@mzdeitz 

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

[mzdeitz]

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

[mzdeitz · Accepted solution]

thank you so much!!!!

[KetanKumar]

@mzdeitz 

its my pleasure to help us