remove gaps between collection list

Store Design
, ,
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