remove gaps between collection list

Store Design
, ,

Topic summary

A user seeks to eliminate white gaps appearing between collection list items on their Squarespace store (Dawn theme, alexanderandrewstbrook.com). Screenshots show unwanted spacing between collection tiles.

Proposed Solutions:

Multiple CSS fixes were suggested targeting .collection-list gap properties and .card__content display settings:

  • Initial solution: Add CSS to base.css file setting display:none on card content elements
  • Alternative approach: Use Custom CSS in Theme Settings with media queries for mobile responsiveness

Complications:

The original poster reported that while the gaps were removed, clicking on collections no longer worked—the links became non-functional.

Current Status:

A revised CSS solution was provided using absolute positioning for card content elements instead of display:none, attempting to preserve clickability while removing gaps. The discussion remains open as effectiveness of the final solution hasn’t been confirmed.

Additional requests emerged about removing borders and making images reach full screen width.

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

hi, i want to remove the white gaps (drawn with red lines) between my collection lists:

Screenshot 2024-12-07 at 21.20.29.png
Screenshot 2024-12-07 at 21.20.29.png949×1250 259 KB

i want it to look something like this:

IMG_3535.PNG
IMG_3535.PNG1170×2532 682 KB

where there are no gaps.

my theme is dawn, website url is www.alexandrawestbrook.com

2

@ads18922 - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.collection-list__item .card--media .card__content{display:none;}

suyash1_0-1733627301277.png
suyash1_0-1733627301277.png1366×768 349 KB

3

Hi @ads18922

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.card__content {
    display: none !important;
}
ul.collection-list {
    gap: 0 !important;
}
}

Here is the result: https://prnt.sc/HDihmD8kw9W7

I hope this helps

Best,

Daisy

4

Thankyou for helping, but do you know how to remove the border, on the left and right side where the collection fits? So the pictures reach the full screen?

5

this works but then when you click on the collections, nothing happens

6

this works but then when you click on the collections, nothing happens

7

Hi @ads18922

Please add this code instead:

@media screen and (max-width: 768px){
.collection-list-wrapper.page-width slider-component.slider-mobile-gutter ul.collection-list li.collection-list__item.grid__item .card.card--standard.card--media > .card__content {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.collection-list-wrapper.page-width slider-component.slider-mobile-gutter ul.collection-list {
    gap: 0 !important;
}
}

I hope this helps

Best,

Daisy