Removing padding on mobile featured collection - DAWN THEM

Store Design
, , ,
1

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

Screenshot 2024-10-24 at 10.32.43.png
Screenshot 2024-10-24 at 10.32.43.png373×789 52.9 KB

2

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 tag

RESULT:

Moeed_0-1729763248569.png
Moeed_0-1729763248569.png347×756 52.7 KB

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

Best Regards,
Moeed

3

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

4

Hi [email removed]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.

5

Hi @andrew72 Please add the below Code:

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 tag

Result:

sahilsharma9515_0-1729763652302.png
sahilsharma9515_0-1729763652302.png1272×540 58.2 KB

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