Remove white space between products on collection page with Monaco

Store Design
, ,

Topic summary

A user seeks to eliminate white space between products on their collection page using the Monaco theme. They want products to display edge-to-edge without gaps, as shown in their reference image.

Solutions Provided:

Multiple CSS-based solutions were offered:

  • Option 1: Add column-gap: 0rem !important; to .collection-product-list in base.css
  • Option 2: Add gap: 0px !important; to .collection-product-list in base.css
  • Option 3: Insert custom CSS via <style> tag in theme.liquid file above </body>
  • Option 4: Add #product-grid { gap: 0 !important; } through Theme Customizer’s Custom CSS

Follow-up Question:

The original poster asked how to also remove edge spacing so images extend fully side-to-side. One responder indicated their solution already addresses this requirement.

Status: The initial gap removal appears resolved, with the edge-spacing question potentially answered but not explicitly confirmed by the original poster.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, I want to remove all white space between products on collection page. I have seen different guides, but none have worked. This is how my page looks currently:

https://studiolamea.com/

Screenshot 2025-03-20 at 14.16.09.png
Screenshot 2025-03-20 at 14.16.09.png2880×1468 435 KB

This is how I want it to look:

Studiolamea_0-1742473076331.png
Studiolamea_0-1742473076331.png999×575 494 KB

My theme is Monaco.

Thank you!

2 Likes
2

Hello @Studiolamea
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.collection-product-list {
column-gap: 0rem !important;
}

result

50.png
50.png1366×607 614 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
3

Hey @Studiolamea please try this code.

Go to Shopify Admin > Online Store > Edit Code > base.css

Go to end of base.css file and paste the following code.

.collection-product-list {
    gap: 0px !important;
}

Results:

thescriptflow_0-1742473805019.png
thescriptflow_0-1742473805019.png1816×449 710 KB

Let me know if this work for you either I provide you other solution code.

4

Hey @Studiolamea

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-1742473684839.png
Moeed_0-1742473684839.png1908×907 279 KB

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

Best Regards,
Moeed

1 Like
5

Amazing, thank you! Is there a way to remove the white space from the edges as well? So the pictures fill the whole space, side to side?

1 Like
6

Hi @Studiolamea

Please add this code to Custom CSS in Online Store> Themes > Customize > Theme settings.

#product-grid { gap: 0 !important; }
7

Hey @Studiolamea

If you try out the code which I shared with you, it will work perfectly exactly how you want.

Best Regards,

Moeed