Need to change padding of a section for mobile only

Store Design
,
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.