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

Store Design
1

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
IMG_2026.jpeg1242×2688 208 KB

1 Like
2

@mzdeitz

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3
1 Like
4

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

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.

1 Like
6

@mzdeitz

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

7

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.

1 Like
8

@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;
}
}
1 Like
9

thank you so much!!!

1 Like
10

@mzdeitz

its my pleasure to help us

1 Like