Get rid of white space on collections

Store Design
, , ,

Topic summary

A user seeks to remove left and right whitespace from their collection list display on a Shopify Dawn theme store.

Initial Solutions Attempted:

  • Multiple CSS code snippets targeting .section-collection-list .page-width-desktop and #shopify-section-featured-collections were suggested for the base.css file
  • These initial approaches did not resolve the issue

Working Solution:
The problem was resolved by adding CSS to Customize > Theme settings > Custom CSS (not base.css):

.collection-list-wrapper.page-width {
    max-width: 100% !important;
    padding: 0 !important;
}

Follow-up Customization:
The user then requested control over vertical padding and spacing between images. Additional CSS was provided to:

  • Adjust top/bottom padding separately using padding-left and padding-right properties
  • Control spacing between collection items using CSS custom properties for grid spacing (desktop and mobile variants)

Status: Resolved with additional customization options provided.

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

Hello,

Is there a way of getting rid of the white space that is to the left and right of my collection list?

collection list.png
collection list.png1280×720 596 KB

2 Likes
2

In order to get rid of white space you have to paste this code in the end of base.css file.

Here is how you can find base.css file.

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

.section-collection-list .page-width-desktop{
  padding: 0px !important;
  max-width: 100% !important;
}

Results:

thescriptflow_0-1744066211528.png
thescriptflow_0-1744066211528.png1920×579 271 KB

3

Hello!

I tried your code but didn’t work. please see screen shot of code.

code base.css.png
code base.css.png1050×524 28.9 KB

4

Hi there @villabodrum I suggest that you try this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
#shopify-section-featured-collections .section-header {margin-bottom: 0px;}
#shopify-section-featured-collections .hr--invisible {
    border-bottom: 0;
    margin: 30px 0px 0px;
}

Copy
Let me know if it works for you.

5

Hi @villabodrum ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.collection-list-wrapper.page-width {
    max-width: 100% !important;
    padding: 0 !important;
}
6

Hi theme.css does not appear for me in dawn theme.

Please see my options

theme.png
theme.png425×654 46.5 KB

7

Hi Unfortunately didnt work

8

Hi @villabodrum ,

Please send the website link, I will check it for you

9

Hi! https://ekety5-vj.myshopify.com/

Thank you!

10

Hi @villabodrum ,

Please go to Customize > Theme settings > Custom CSS and add code:

.collection-list-wrapper.page-width {
    max-width: 100% !important;
    padding: 0 !important;
}
1 Like
11

Thank you so much!!

Do you know how I can play around with the padding above and in between the images?

images.png
images.png1280×342 484 KB

12

Hi @villabodrum ,

  • For padding above: Please change code:
.collection-list-wrapper.page-width {
    max-width: 100% !important;
    padding: 0 !important;
}

=>

.collection-list-wrapper.page-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
  • For between: Please add code:
.collection-list-wrapper .collection-list {
    --grid-desktop-vertical-spacing: 8px;
    --grid-desktop-horizontal-spacing: 8px;
    --grid-mobile-vertical-spacing: 4px;
    --grid-mobile-horizontal-spacing: 4px;
}
1 Like