Eliminate gap between collections of collection list

[AnSrSi]

Hi there,

I wanted to eliminate the empty column gap between each collections of the collection list section for desktop and eliminate the row gap for mobile.

Store : https://www.valcoure.store/

password: kothavara

Thank You.

[EcomGraduates]

look for stuff like this in the HTML

then go into your CSS or custom CSS and add something like

.grid--collection {
  gap: 0 !important;
}

sometimes themes use gap, sometimes margin, so you might need to try a few till it sticks
also check if the section above or below has padding-bottom or padding-top set, cause that can create the illusion of a gap even when the collection list is tight

[AnSrSi]

Sorry, its not working

[BiDeal-Discount]

Hi @AnSrSi

Which page can I see that issue?

[AnSrSi]

In the collection list of home page home page

[BiDeal-Discount]

I see it’s displaying normally on desktop, which screen size you want to change?

[AnSrSi]

As you can see there is a white gap between these collection cards in both the desktop and mobile. I don’t want that white space.

[BiDeal-Discount]

You can try to add this Custom CSS code:

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

[AnSrSi]

now there is a white gap in the rightmost side

[BiDeal-Discount]

so you want image fit to entire screen or white gap same horizontal?

[AnSrSi]

i want the three collections to be arranged horizontally without any gap and should fit in the screen without an gaps

[BiDeal-Discount]

Got your point.

so let try to add this Custom CSS code:

@media screen and (min-width: 750px) {
  .collection-list {
    gap: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .collection-list > li.collection-list__item {
    width: 100%;
    max-width: 100%;
  }
}

[AnSrSi]

Thank you @BiDeal-Discount ,

Its working perfectly.

[BiDeal-Discount]

You’re welcome. let me know if you need furture assistance