Increase number of collection lists per row on mobile view only

Shopify Discussion

Topic summary

A Shopify store owner wants to display 4 collection items per row on mobile view instead of the default maximum of 2.

Initial Solution:

  • Custom CSS code was provided to add to Theme Settings > Custom CSS
  • Code uses media query targeting screens under 749px width
  • Adjusts collection thumbnail width to 25% to fit 4 items per row

Additional Refinements:

  • Text size reduction was requested and addressed by adding font-size styling to the CSS
  • Margin adjustments (8px width, 4px left/right margins) were made to improve spacing

Technical Issue:

  • User encountered a publishing error: “Online Store editor session can’t be published”
  • Alternative solution suggested: add code to theme.liquid file in the section via Edit Code
  • A third approach was offered: add CSS directly to base.css/style.css/theme.css file in the Assets folder

Status: Multiple working solutions provided with screenshots demonstrating the 4-column mobile layout result.

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

I am looking to have 4 collections per row in my collection list for my mobile view. I can currently have only a max of 2.
Please help!

1 Like
2

Hi @Mitch23

Can you share your store link?

3

https://flexibleneon.com.au/?_ab=0&_fd=0&_sc=1

4

You can add this code to Custom CSS in Sales Channels > Online Store > Themes > Customize > Theme settings to change it to 4 collections per row

@media (max-width: 749px) {
    .shopify-section--collection-list .container .column.thumbnail {
        width: calc(25% - 20px);
    }
}
5

Where do I add it? I tried and it didn’t work

6

Please go to your store admin >Sales Channels > Online Store > Themes > Customize > Theme settings > Custom CSS

Screenshot 2025-01-10 at 09.48.07.png
Screenshot 2025-01-10 at 09.48.07.png2548Ă—900 213 KB

Screenshot 2025-01-10 at 09.48.34.png
Screenshot 2025-01-10 at 09.48.34.png1810Ă—1612 199 KB

7

Perfect! and how do i shrink the text with it?

8

Please update the code

@media (max-width: 749px) {
    .shopify-section--collection-list .container .column.thumbnail {
        width: calc(25% - 8px);
        margin-left: 4px;
        margin-right: 4px;
    }
    .shopify-section--collection-list .container .thumbnail__title { 
        font-size: .8rem; 
    }
}
9

When I try to save it says: Online Store editor session can’t be published

10

So please remove it and add this code to theme.liquid file after in Online Store > Themes > click “…” in current theme > Edit code
11

Hi @Mitch23

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 798px) {
.shopify-section.shopify-section--collection-list .medium-down--one-half {
    width: calc(25% - 20px);
}

.thumbnail__content span.thumbnail__title {
    font-size: 13px;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!