How to remove the white gap padding between the collections in the collection list

[moodyc]

Hello everyone, I'm using the Studio Theme. 

I would like to remove the gap between the collections in my homepage collection list. I've successfully removed the side, top, and bottom padding, but haven't figured out a way to remove the middle one. 

My site is Street Smarts and the password is smarts. Here's the screenshot of the collection list. 



I placed the code at the bottom of my theme.liquid file. Here's the code I used to remove the side padding: 

<style data-shopify="">
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0;
padding-left: 0;
}

@media screen and (min-width: 750px) {
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0;
padding-left: 0;
}

</style>

THANK YOU.

[PageFly-Richard · Accepted solution]

Hi @moodyc ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-collection-list.css->paste below code at the bottom of the file:

.collection-list .collection-list__item {
    width: 50% !important;
    max-width: 50% !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[mics · Accepted solution]

The issue with this code is that it uses !important to override the default styling of the .collection-list__item element, which can lead to unexpected behavior or difficulties in further modifying the element's styling. Additionally, setting the width and max-width of each item to 50% means that only two items will appear per row, which may not be the desired layout for all screen sizes. It's generally best to avoid using !important unless absolutely necessary and to use responsive design techniques to ensure the layout works well on all devices.
insted use this .grid-uniform .grid__item { padding: 0; }

This should remove the padding between collections in your homepage collection list.

[moodyc]

@KetanKumar @suyash1 @oscprofessional please help if you have time

[KetanKumar]

@moodyc 

yes, please try this 
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.collection-list {
    row-gap: 0px !important;
    column-gap: 0px !important;
    justify-content: center;
}

[moodyc]

THANK YOU! It worked for the gap in the middle but the padding transferred to the sides 😂 How do i remove this please? 🙂 

[oscprofessional]

@moodyc 

.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
    max-width: initial;
}

[oscprofessional]

@moodyc 

also add this css.

.marquee-container {
    max-width: initial;
}

[moodyc]

The marquee container worked, thank you! 

However, the collection-list-wrapper didn't. I already placed a code that removed the gap between the collections but moved the padding to the side of the collections. Maybe this will help: 
.collection-list {
row-gap: 0px !important;
column-gap: 0px !important;
justify-content: center;
}

thank you

[PageFly-Richard · Accepted solution]

Hi @moodyc ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-collection-list.css->paste below code at the bottom of the file:

.collection-list .collection-list__item {
    width: 50% !important;
    max-width: 50% !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[mics · Accepted solution]

The issue with this code is that it uses !important to override the default styling of the .collection-list__item element, which can lead to unexpected behavior or difficulties in further modifying the element's styling. Additionally, setting the width and max-width of each item to 50% means that only two items will appear per row, which may not be the desired layout for all screen sizes. It's generally best to avoid using !important unless absolutely necessary and to use responsive design techniques to ensure the layout works well on all devices.
insted use this .grid-uniform .grid__item { padding: 0; }

This should remove the padding between collections in your homepage collection list.

[moodyc]

can i have the code so that it won't affect the mobile layout please? thank you! 

[PageFly-Richard · Accepted solution]

Hi @moodyc ,

I’m sorry to hear that. Please give it a try with this new solution:

You can replace previous my code by below code in section-collection-list.css file:

@media screen and (min-width: 768px) {
    .collection-list .collection-list__item {
        width: 50% !important;
        max-width: 50% !important;
    }
}
@media screen and (max-width: 767px) {
    .collection-list {
        padding: 0 !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[falcon]

Hey! I've been trying to reduce the top and bottom padding of the collection list. Please go to https://nuclieus.com/ see the collection list right after the hero image. It's 2 collections, but I want to reduce the top padding. I need the collectio list to show up higher (for less scroll on mobile devices). Please help, thanks!