Remove Empty Space

Store Design
, , , ,

Topic summary

Issue: Collection page configured for 4 products per row only rendered 3 on desktop.

Desktop fix provided: Add a CSS rule in base.css with a desktop media query (min-width: 990px) to set .grid–4-col-desktop .grid__item to max-width: calc(25% - var(–grid-desktop-horizontal-spacing)*12) !important. Reported to display 4 items per row after saving.

Follow-up problem: On mobile, the layout appeared incorrect after the desktop change (screenshot shared).

Additional suggestions: One reply advised adding code in theme.liquid before , but the actual code snippet was missing in the post; a screenshot showed an expected result.

Mobile fix from original helper: Add a CSS rule in base.css with a mobile media query (max-width: 768px) to set .grid–2-col-tablet-down .grid__item to width: calc(47% - var(–grid-mobile-horizontal-spacing)/2) !important.

Status: Desktop display issue appears resolved; a specific mobile CSS fix was proposed. Awaiting confirmation from the original poster on whether the mobile layout is fully corrected.

Summarized with AI on December 21. AI used: gpt-5.
5

Hi @ArnauP ,

We’re happy to see that our suggestion helped you solve the issue.

Sr about my mistake on mobile.

You can add more css script in base.css, like below to fix this problem:

@media screen and (max-width: 768px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(47% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    }
}

Hope it helps.

:heart_eyes: It’s such my honor to help you, bro.