Archived topic

Mobile Padding CSS

9 replies · Started by Michelle on January 10, 2021

Viewing posts 1–10 of 10

January 10, 2021 at 2:53 pm #1613628

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?

January 10, 2021 at 4:17 pm #1613698

Hi there,

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

You can use the private information field.

Let me know :)

January 10, 2021 at 5:14 pm #1613746

My information is below

January 10, 2021 at 8:12 pm #1613813

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

January 10, 2021 at 9:17 pm #1613851

Yes, for every page on mobile.

January 11, 2021 at 1:39 am #1614003

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;
}
}

January 12, 2021 at 12:50 pm #1616256

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

January 12, 2021 at 2:53 pm #1616335

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;
    }
}

January 12, 2021 at 3:01 pm #1616340

Nice. Thanks.

January 12, 2021 at 3:15 pm #1616356

No problem :)

This archived topic is closed to new replies.

Start building better websites today.