[Resolved] Mobile Padding CSS

[Michelle]

I utilized Customizer to adjust the padding between the header and content on mobile. I set the padding and the Container settings, layout>blog>archives, and so on. If I move my Customizer settings any further to reduce the padding that shows on the mobile, it messes up the settings on my blog page, archive pages, and category pages. It seems that no amount of adding or subtracting padding is helping.

Is there CSS that can reduce the padding ONLY FOR THE MOBILE header and the featured image?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Michelle]

My information is below

[Leo]

Would this be for every page or just a few specific page?

[Michelle]

Yes, for every page on mobile.

[Elvin]

Hi,

To clarify: You’re trying to remove the space between the content and header highlighted in orange?
https://share.getcloudapp.com/04uNDjYy

If so, you can try adding this CSS:

@media(max-width:768px){
.separate-containers .site-main {
    margin-top: 0;
}
}

[Michelle]

I added the CSS and found that really, the only page that needs it is the Home page of the mobile site. My mistake.

[Leo]

You can try this CSS to make Elvin’s CSS apply on the home page only:

@media(max-width:768px) {
    body.home.separate-containers .site-main {
        margin-top: 0;
    }
}

[Michelle]

Nice. Thanks.

[Leo]

No problem 🙂

[Author]

Posts