Need to change padding of a section for mobile only

Store Design
,

Topic summary

Goal: reduce top padding to 0px on mobile for the “image with text” section on a Shopify homepage.

Context: Site URL shared (crisprbites.co.uk, no password). The user’s mobile inspection shows a section-specific class (.section-template–…-padding) setting padding-top: 48px and padding-bottom: 75px.

Attempt 1: Add a media query in base.css to set .image-with-text-section { padding-top: 0 } for max-width: 767px. Result: no change; the section class still applies padding on mobile.

Attempt 2: Use a different mobile breakpoint (max-width: 749px) and target the image container selector, adjusting padding-bottom to 80% with !important to bring the image closer to the header. Note: setting padding to 0px may remove the image because padding is used to maintain aspect ratio.

Key technical points: CSS media queries apply rules at specified screen widths; section-specific classes can define padding that may need more specific selectors or !important to override. Code snippets and a screenshot are central to the guidance.

Status: No confirmation of success; discussion remains open with the suggestion to target the correct element and avoid zero padding that breaks image display.

Summarized with AI on January 23. AI used: gpt-5.
1

For my image with text section at the top of my home page i need to change the top padding to 0px for mobile only, any help would be appreciated.

Thanks

1 Like
2

Hi @JW14 ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

yes sorry, crisprbites.co.uk, no password

4

Hello @JW14 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

@media only screen and (max-width: 767px) {
  .image-with-text-section {
    padding-top: 0;
  }
}

Save and preview

Hope this can help.

Transcy

1 Like
5

HI @Transcy ,
Unfortunately that hasn’t changed it i tried that myself, when i inspect the mobile view it still shows this

.section-template–19224051122451__2238f4cd-f077-4c44-bb7b-da986d6160de-padding {

  1. padding-top:4 8px;
  2. padding-bottom: 75px;

}
Any ideas?

1 Like
6

Thank you fro the information. But i didnt see this code in the mobile. Anyway you like the top on the image with text reduce to be near in your header? If that so try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 749px) {
    .image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    padding-bottom: 80% !important;
}
}

Result:

Ribe_Dagandara_0-1689710955769.png
Ribe_Dagandara_0-1689710955769.png753Ă—425 123 KB

Note: In this area cant be padding 0px cause the image is attach in the padding if you 0 it the image will be gone. I hope it help.