how to show two products in a row for each collection mobile version? I use debut theme

[holahome]

Hi, guys seems like i got little confusion here, my site desktop version is optimised with 3 products in a row, however its different with the mobile version it shows just one product per row and i do have around 20-30 products per collection. please let me know how to fix this. i am using debut theme at the moment

[KetanKumar]

Hello, @holahome 

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.

[holahome]

www.crossmanhome.myshopify.com

password: taltau

here it is

[KetanKumar]

@holahome 

Thanks for store URL.

sorry but i can't see grid view can you please show me

[holahome]

hi! here's my store www.crossmanhome.com

[KetanKumar · Accepted solution]

@holahome 

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 only screen and (max-width: 749px) {
.grid__item.grid__item--collection-template {
    width: 50% !important;
}
}

[TheUrbanMiami]

Copied and pasted this as instructed and it did not work. 

Please advise on correct code / solution. 

Thank You

[Beytibyarabesqu]

Hello @KetanKumar 

I'm using Debut Theme, and

1. I have 2 collections per row on my desktop home page. However, I just have 1 collection per row displayed on the mobile version. I want them to be as in the desktop: to display two collections in a row on the  mobile version. I tried adding the code below, but I can't find: Asset->/theme.scss.liquid-> I just have  theme.css and theme.js under Assets
2. I am trying to make the collection names on the home page, go underneath the photos, and not overlay as they do now. I don't want them on the photo, but underneath. How can I do?

Let me know how can I do,

Thanks,
M

[KetanKumar]

@Beytibyarabesqu 

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.

[Beytibyarabesqu]

@KetanKumar this is it https://beytibyarabesque.com/

[KetanKumar]

@Beytibyarabesqu 

yes please confirm

[Beytibyarabesqu]

@KetanKumar exactly i want them like this on the mobile version (as they are like this on desktop!)

Also, I am trying to make the collection names on the home page, go underneath the photos, and not overlay as they do now. I don't want them on the photo, but underneath. How can I do?

thankssss

[KetanKumar]

@Beytibyarabesqu 

yes please try this code

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

.collection-grid .medium-up--one-half {
    width: 50%;
}

[Beytibyarabesqu]

@KetanKumar amazing it worked!!

i just need now to put the collection title on the home page only below the images instead of overlay. do u know how?

[KetanKumar]

@Beytibyarabesqu 

yes please sent this section code so i will update