How to reduce the size of multi column or fit 5 across instead of 4

Store Design
, ,

Topic summary

A user wants to display 5 columns instead of 4 in their Shopify store’s multi-column section on desktop, with smaller images.

Solutions Provided:

Two working solutions were offered:

  1. CSS via theme.liquid: Add custom CSS code in the theme.liquid file, just above the </body> tag, to adjust column layout

  2. CSS via theme.css: Add media query code to theme.css targeting screens wider than 1000px:

    @media screen and (min-width: 1000px) {
  .multi-column {
    grid: auto / repeat(5, minmax(0, 1fr));
  }
}

Resolution:
The original poster confirmed the first solution worked successfully. Both approaches modify the grid layout to accommodate 5 columns across on desktop displays.

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

Hey @AmberWilkinson

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-1728362659742.png
Moeed_0-1728362659742.png1342×696 230 KB

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

Best Regards,
Moeed