How can I remove padding on mobile view sections?

Store Design
,

Topic summary

A user seeks to remove padding from their homepage sections specifically on mobile view. The green-highlighted padding appears in an attached screenshot.

Initial Solution Attempt:

  • Add CSS code to theme.css file targeting .image-hero with padding: 0 !important within a @media(max-width: 767px) query
  • This approach did not resolve the issue

Updated Solution:
After reviewing the store URL (trunksoflondon.com), a more specific CSS selector was provided:

  • Target #shopify-section-template--14570280234__165484440487430b.image-hero instead
  • Apply the same padding removal within @media(max-width: 719px) query
  • Code should be added to bottom of theme.css file via Themes → Edit code → Assets

The discussion remains open pending confirmation of whether the updated CSS solution works.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Evening All,

By anychance, does anyone know how i can remove the Padding (Highlighted Green) from my Homepage, but on Mobile View only?

Screenshot 2022-11-27 at 17.26.40.png
Screenshot 2022-11-27 at 17.26.40.png2540×1138 684 KB

Thank you in advance!

2

hi @TOL1
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

@media(max-width: 767px){
.image-hero {
padding: 0!Important;
}
}
3

Hi ExpertRookie,

Thank you for the suggestion, unfortunately it didn’t work though :slightly_frowning_face:

4

Hi @TOL1
Can you share your store url?

5

trunksoflondon.com, the store password is abc123. Thanks again!

6

Hi @TOL1
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

@media(max-width: 719px){
#shopify-section-template--16017275420834__16558445044f80743b .image-hero {
padding: 0!Important;
}
}