Removing padding on mobile featured collection - DAWN THEM

Store Design
, , ,

Topic summary

A user seeks to remove padding from a featured collection section on mobile devices for their Shopify store using the Dawn theme.

Multiple solutions provided:

  • CSS-based approaches: Several respondents suggest adding custom CSS code targeting mobile screens (max-width: 768px) to set padding to 0 on collection/banner elements. Code can be added via Theme Customizer → Custom CSS field.

  • theme.liquid modification: Some recommend inserting CSS within <style> tags directly in the theme.liquid file, above the closing </body> tag.

  • Specific selectors vary: Proposed CSS targets include .collection, .banner__box, .content-container, and template-specific section IDs.

Status: Multiple solutions offered but no confirmation yet from the original poster on which approach worked. The discussion remains open with contributors requesting feedback and asking to mark helpful responses as solutions.

Note: Some responses contain reversed/garbled text, likely formatting issues, but the core CSS solutions are discernible.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
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