Removing padding on mobile featured collection - DAWN THEM

[andrew72]

hello,

I was looking for a custom code to remove the padding seen in my photo on mobile only.

Page link: https://obadiahcoffee.com/pages/equipment

 

[Moeed]

Hey @andrew72 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.collection.section-template--16080751919258__df7ff6a5-a9e1-4c86-af74-f3271eab3c20-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    padding-bottom: 10px !important;
}

</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[DaisyVo · Accepted solution]

Hi there,

I hope you are well.

Here is the custom CSS code you can use to remove the padding on the mentioned page on mobile:

@media screen and (max-width: 768px){
 .collection:has(slider-component) {
    padding: 0 !important;
 }
}

Please help me check on the code and let me know if it works.

You can add the code here in the Custom CSS field: https://prnt.sc/K_sGBmQQIRgm

Best,

Daisy

[LizHoang]

 Hi @andrew72 ,

To remove the padding on the featured product section, you use this custom CSS code:

1. Go to Shopify -> Theme -> Customize -> Open the Custom CSS on theme

2. Copy and paste this custom code on the section > Save

.section-template--16080751919258__df7ff6a5-a9e1-4c86-af74-f3271eab3c20-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}

I hope it would help you. If you have any question, feel free to ask me.

[sahilsharma9515]

Hi @andrew72 Please add the below Code:

<style>
@media screen and (max-width: 680px){ 
    .section-template--16080751919258__df7ff6a5-a9e1-4c86-af74-f3271eab3c20-padding {
    padding: unset !important;
    }
//If you want to decrease the more height then add the below code here.
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

If you want to decrease it more then add this piece of code as well.

.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    padding-bottom: 10px !important;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil