How to remove spaces between active filter items in Shopify Dawn?

Store Design
1

Hello guys, i would like to remove the horizontal and vertical space between these active filter items, please i prefer to edit the main code in component-facets.css instead of adding extra code.

Thank you

Dabou_1-1707133538601.png
Dabou_1-1707133538601.png594×866 29 KB

2

Adjust this value to decrease the vertical space, you can put something like this: (line 1190)

@media screen and (min-width: 750px) {
  .facets-vertical .active-facets__button {
    margin-bottom: 0.5rem;
  }
}

Remove the following code: (line 538)

@media screen and (min-width: 990px) {
  .active-facets__button {
    margin-right: 1.5rem;
  }
}

Remove only margin-right: 1.5rem; from the following code: (line 514)

.active-facets__button {
    display: block;
    margin-right: 1.5rem;
    margin-top: 1.5rem;
    padding-left: .2rem;
    padding-right: .2rem;
    text-decoration: none;
}

Result:

22.PNG
22.PNG287×116 2.57 KB

1 Like
3

Hi @Dabou

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

facet-remove a {

margin: 4px !important;

padding: 0 !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly