How to stack mobile images 2x2 with CSS?

Store Design
, , ,

Topic summary

A Shopify store owner wants to modify their theme’s image row section to display 4 images in a 2x2 grid on mobile devices, while keeping the 4-across layout on desktop.

Initial Problem:

  • The current theme displays 4 images horizontally across the screen on mobile
  • The user identified CSS as the solution area but struggled to find the right code to modify

Attempted Solution:

  • A suggested fix involving adding code to the theme.liquid file did not work
  • The issue appeared to stem from styling in the theme section template with fixed widths (23.75%) for each image

Working Solution:

  • The user successfully resolved the issue using a media query: @media(max-width: 767px) { .image-row__image { width: calc(50% - 20px) !important; } }
  • This CSS targets mobile screens and sets each image to 50% width (minus spacing), creating the desired 2x2 layout
  • The user plans to apply this specifically to product pages using a conditional check for URLs containing “/products/”

Status: Resolved with custom CSS media query.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
2

Hi @MKrantz ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly