How can I display two collections per row on mobile view?

Store Design
1

Hello,

I have my collection list set to 3 collections per row, which works on desktop viewing. But in mobile it only shows one no matter how many I select. How do I get the mobile viewing to show 2 per row?

Thanks!

2

Hello, @mzdeitz

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

3

Thank you! thewitchesmark.com

4

@mzdeitz

Thanks for URL.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/style.scss.liquid->paste below code at the bottom of the file.
@media (max-width:767px) {
.collection-grid .col-sm-4 {
    width: 50%;
    float: left;
}
}
@media (max-width:528px) {
.collection-grid .homepage-subheading--2 {
font-size: 17px;
height: 20px;
}
}
5

That was amazingly helpful! Thank you!!!

6

I have the same exact issue, but this solution didn’t help me at all. I also have the most recent version of Canopy.

7

@shelbyrad

Please share your site URL,
So I will check and provide a solution here.

8

Hi there, my URL is sandysresale.com. I actually got a hold of the maker of the Canopy theme and they helped me alter the code so the collection list is a grid on mobile. I still wish that my sidebar menu was visible on mobile. You can see the sidebar on the desktop view, but you cannot see it on mobile view.

9

@shelbyrad

Thanks for URL

sorry, your store password protect can you please share

10

Hello -

I am having the same issue and the resolution you mentioned does not work on my envy page. I assume instead of style.scss. i need to go to theme.scss. i tried pasting the code but it did not work. Could you help?

11

Hello, @MOJiCanada

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

12

Could you just provide code and let me know where to insert? I know it’s under theme.scss.liquid

13

@MOJiCanada

can you please share the store url plz.

14

Please help me with this issue in Atlantic theme please.

Store url: https://carlo-hayes-designs.myshopify.com

Thanks

15

@yodendaal

yes i have post solution your original post

16

Hi!

Do you think you could help with this? I’ve got the same issue!

17

@Annielynch

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.

18

Hello! Thank you so much.

It’s www.harnessbrazaar.com :smiling_face:

19

@Annielynch

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/style.scss.liquid->paste below code at the bottom of the file.
@media (max-width:767px) {
.collection-grid .row {
    display: flex;
    flex-wrap: wrap;
   }
.template-index .collection-grid .indiv-collection-grid-homepage {
width: 50%;
}

}
20

Thank you so much! It’s worked :slightly_smiling_face: