Display only 2 collections per row on Mobile for specific area

Store Design
,

Topic summary

A Shopify store owner wants to display only 2 collection images per row on mobile devices for a specific homepage section, while keeping desktop layout unchanged.

Initial Problem:

  • Custom CSS attempts targeting the specific section ID weren’t working
  • Changes to theme.css file didn’t reflect on the frontend
  • Mobile view showed more than 2 collections visible at once

Solution Provided:
A helper provided CSS code to be added to theme.liquid file (above the </body> tag) using media queries and grid display properties.

Refinement:

  • First solution affected all collection lists site-wide
  • Updated code successfully targeted only the specific section using its unique ID
  • Original poster confirmed the targeted solution worked

Status: Resolved for the original question.

A secondary user later requested similar help for their mobile view issue, providing their store URL (urbansouquae.store, Dawn theme), but this appears to be an ongoing separate inquiry.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
6

Hey @Toptoys2uHS

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1697711138829.png
Moeed_0-1697711138829.png386×699 162 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like