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

[brookeatgravel]

Hi everyone!

I am trying to make it so that we can use "featured collections" on our main page. I would like them to be 2x2 next to each other instead of stacking. 

Right now we are using Startup and Pacific, both Pixel Union themes. I can't get any answers from them at the moment. 

Thanks!

[KetanKumar]

Hello, @brookeatgravel 

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.

[brookeatgravel]

Thank you so much for your response. Here is a preview of the theme: 

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

[KetanKumar]

@brookeatgravel 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (max-width: 720px) {
.row-of-1 .home-collection-list-item, .row-of-2 .home-collection-list-item, .row-of-3 .home-collection-list-item {
    width: 50%;
    margin-top: 0;
    margin-bottom: 20px;
}
}

[nakanotakuya]

@KetanKumar 

Hello.
I'm struggling with the same thing.
My theme is the DAWN theme, but
1. go to Online Store->Theme>Edit code
2. go to Asset->/theme.scss.liquid->paste below code at the bottom of the file.
I don't have "theme.scss.liquid" in my assets.
What should I do?

[nakanotakuya]

Hi all.

I would like to be able to use the "Collection List" on the main page. Instead of displaying the collections stacked on top of each other, I want to display them side-by-side in 2x2.

I am currently using the Dawn theme.

Thank you very much.

[KetanKumar]

@nakanotakuya 

yes, please share store url

[charlotteli82]

Hi there,

I'm also using the Dawn theme and trying to display a collection list where on mobile the images are stacked side by side (2 rows of 2) rather than stacked on top of each other. I also can't find the theme.css.liquid file (like the previous user with this issue) - so have hit a block.

I am currently working on a development theme so it's not yet live.

Can you advise?

Thanks!

Charlotte

[KetanKumar]

@charlotteli82 

yes, please share store url

[charlotteli82]

www.tocoswim.com (but the site you will see is just the current live prestige theme - i am working on the dawn theme on a development)

thanks!

C

[KetanKumar]

@charlotteli82 

oh so can you please share dawn theme store url 

[charlotteli82]

Yes - let me know if this works: https://tocoswim.com/?_ab=0&_fd=0&_sc=1

Thank you!

Charlotte

[KetanKumar]

@charlotteli82 

thanks but i need dawn theme on a development preview url 

[charlotteli82]

Apologies - is this better? https://48en8yxsfx11xjx8-6073647192.shopifypreview.com

[KetanKumar]

@charlotteli82 

thanks for update, yes please add this code

1. Go to Online Store-> Theme->Edit code
2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}

[scranman]

@KetanKumar 

Could you help me with the same issue? I am using Sense 2.0

https://znprgow8bcy00byr-55773429934.shopifypreview.com

I can get 2x2 on desktop, but I would also like on mobile. 

[KetanKumar]

@scranman 

thanks for update, yes please add this code

1. Go to Online Store-> Theme->Edit code
2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}

[scranman]

Thank you so much! Its amazing 😄 I really appreciate your help.

[KetanKumar]

@brookeatgravel 

oh sorry for late here, thanks for update this one 

[walfaro90]

Hi I am having the same issue with my website, products do not stack, so ppl are forced to scroll when on mobile, my website is: www.Haulingcountry.com

[walfaro90]

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

[Anderson10]

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

[KetanKumar]

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

[Anderson10]

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. 

[KetanKumar]

@Anderson10 

yes, please add this code

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

[Anderson10]

Works perfectly - thank you very much!

[Anderson10]

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

[KetanKumar]

@Anderson10 

Yes, please add this code

.CollectionList--grid {flex-wrap: wrap;}

[Anderson10]

Perfect. Thank you again  😊

[jaehome]

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

[carla_5]

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

[Regan90]

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

[silentwinner]

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?

[JessFried]

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!!

[kk30]

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