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

Store Design
1

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

2

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.

3

www.crossmanhome.myshopify.com

password: taltau

here it is

4

@holahome

Thanks for store URL.

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

5

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

6

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

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

Please advise on correct code / solution.

Thank You

8

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

9

@Beytibyarabesqu

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.

10

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

11

@Beytibyarabesqu

yes please confirm

KetanKumar_0-1637096801098.png
KetanKumar_0-1637096801098.png1920×1080 518 KB

12

@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

13

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

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

15

@Beytibyarabesqu

yes please sent this section code so i will update