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

Store Design

Topic summary

Main issue: On Debut theme, mobile collections/products show only one item per row; users want two per row like desktop.

Key actions/solutions:

  • A CSS fix was suggested for small screens: set collection grid items to 50% width (two columns). Example 1: add to theme.scss.liquid with a media query (max-width: 749px) targeting .grid__item.grid__item–collection-template { width: 50% !important; }.
  • Example 2 (worked for a user with theme.css): in Assets > theme.css add .collection-grid .medium-up–one-half { width: 50%; }.

Outcomes:

  • The first code did not work for at least one participant; no follow-up solution provided.
  • The second code successfully made two collections per row on mobile homepage for another participant.

Additional request:

  • Move collection titles below images (not overlay) on the homepage; this remains unresolved pending the specific section code from the store.

Notes:

  • Asset names differ between theme versions (theme.scss.liquid vs theme.css).
  • An image was shared to confirm the desired two-column layout.

Status: Partially resolved; two-per-row achieved for one case. Title placement change is still open.

Summarized with AI on February 26. AI used: gpt-5.
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

1 Like
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;
}
}
1 Like
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

1 Like
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/

1 Like
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

1 Like
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