Debut Theme - One product per row on mobile size

BossKie
New Member
3 0 0

Hey,

So I’m aware there’s an old thread about a similar question, but it seems outdated and the solve doesn’t work.

My featured products show 2 products per row on mobile view and it’s hard to see the item. What do I edit in the code to show just 1 product per row? 

Many Thanks,

Kieran

0 Likes
Don
Shopify Staff
Shopify Staff
1222 71 155

Hi there!

Don here from Shopify. :)

To set your products to display one per row on the mobile version of the Debut Theme, you need to make one simple change in one file.

To go from this:

alt

To this:
alt

You would just need to:

  • Open the following file in your theme code editor - Sections > collection.liquid

  • On lines 16, 19 and 22 change small--one-half to small--one-whole

alt

And you're all set!

Regards,
Don

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BossKie
New Member
3 0 0

Thanks Don

0 Likes
BossKie
New Member
3 0 0

Thanks Don, that worked perfectly! You're my hero.

For the sake of anyone else with the same issue. It only changed it for the homepage and not on a collection page, so I just did exactly the same thing on line 151, 153 and 155. It worked a charm.

Really appreciate you helping me out,

Kieran

 

0 Likes
amyspreloved
Tourist
3 0 1
Hi there,

I am wanting to do the same layout and I have followed your steps but I only have lines 1 - 5.

I’m wondering if you would be able to assist this?
richardun
New Member
1 0 0

@BossKie , can you please accept the answer from Bob?  It was a great answer and solved it for me today.  This way, it'll be noted at the top that this one is solved so someone else looking for this answer will read it since it will look solved.  I almost missed it tonight... besides, I'm sure Bob would appreciate the credit.  Thanks!

0 Likes
flatcapfellas
New Member
4 0 0

I have the same problem. When I go on to collection.liquid I only have 5 lines on the code and I need help as soon as possible!!!

0 Likes
Alan15
Explorer
76 12 16

Are you sure you are looking at collection.liquid in the Sections folder, there is one in the Templates folder as well, it only has 5 lines of code?

0 Likes
flatcapfellas
New Member
4 0 0
Ok my bad. What part of the code do I edit to enable 2 products to show on each row on a mobile device
0 Likes
Alan15
Explorer
76 12 16

It should be as described above--change lines 16, 19 and 22. But the default should already be 2 per row on small screens. The solution above switches it to 1 per row.

0 Likes