Display collections side by side instead of stacking them on main page on mobile?

Store Design
21

https://haulingcountry.com/?_ab=0&_fd=0&_sc=1

22

Hi @KetanKumar , would this code work for the Prestige also? Looking for the collection list to be side by side on mobile rather than stacked.

https://frontiers-man.com/

Many thanks

Mark

1 Like
23

@Anderson10

oh sorry for that issue can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media (max-width: 640px) {
.CollectionList--grid {display: flex;}
.CollectionItem {flex: 50%; width: 50%;}
    }
1 Like
24

Thank you @KetanKumar .

Is there any way to set the height of the images. It now displays two per row but they seems really tall and skinny - see attached.

Mobile.PNG
Mobile.PNG617×1223 602 KB

1 Like
25

@Anderson10

yes, please add this code

@media (max-width: 640px) {
.CollectionItem__Wrapper {
    height: 300px;
}
}
1 Like
26

Works perfectly - thank you very much!

27

@KetanKumar - sorry, one last thing - is there a way to have only two per row? If i have 4 collections it seems to add them all - see here >

Capture.PNG
Capture.PNG624×1050 445 KB

1 Like
28

@Anderson10

Yes, please add this code

.CollectionList--grid {flex-wrap: wrap;}
1 Like
29

Perfect. Thank you again :blush:

30

Hello, may I have assistance with this same issue. I’d like for the products to be side by side; 2x2 or possibly even 3x3 please sir.
the url is as follows:

https://homegarments.com/?_ab=0&_fd=0&_sc=1

31

I’m trying to do the same on Galleria, any suggestions?

32

Hi there,

I’m having the same issue with my store! Would love to have our homepage collection grids showing as two collections at a time rather than one. https://themes.shopify.com/themes/lorenza/styles/modern/preview

Any help would be much appreciated!!

33

Hi there,

I have used this code to display collections 2x2 on mobile and it worked great. Only thing is when there is 3 collections it will display the third collection larger than the other 2. I am just wondering if there is a way to keep the collection images the same size?

Dawn theme

34

Hey man thank you very much for the solution. can you now help me to expand the two card through the whole screen side by side so it fills the whole picture?

35

Hi there

I am currently working on shopify theme Dawn. I would like my collection list to be side by side on mobile instead of stacked. Could you please assist me?

Thanks

Carla

36

Can you please help me on my main page im trying to have the custom liquid which are links to purchase my items side by side. As well as when you click products i want all these different ones linked instead of going to a page that then goes to one link. Im also trying to html code this into the website which i cant figure out how to get work. https://webgazer.cs.brown.edu there’s two different parts one to track eyes the other to select. Here is my url

View

1 Like
37

@Salability oh sorry for that issue

but you are wrong code added make sure your code signal section code

38

Can I please get help with mine?

1 Like
39

@TK222
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

40

https://tk-boutiquee.myshopify.com