[Resolved] How to seperate content padding in single post page vs archive page

[Trạng]

As title, I want to seperate the content padding of single post vs default page.

Let’s say in this screenshot , the padding helps my single post read easily because main content is narrow, and right sidebar have a space (I will add element in right sidebar later)

But with this padding set up, the homepage with archive show lastest post is terrible. It’s unbalance with left & right. How could we seperate it?

[Leo]

Hi there,

Use the customizer to set the padding that you want on the home page and static pages.

Then add this CSS for to change it specifically for single posts:

.single.separate-containers .inside-article, .single.separate-containers .comments-area, .single.separate-containers .page-header, .single.separate-containers .paging-navigation, .single.one-container .site-content, .inside-page-header {
    padding: 30px 50px 120px 140px;
}

[Trạng]

Wow thanks Leo! Love your support!

[Leo]

No problem 🙂

[Trạng]

Hi Leo, these paddings are not responsive on mobile. How could I fix it? Screenshot here

[David]

Hi there,

use an @media query around the CSS eg. this will apply your CSS on larger screens:

@media(min-width: 769px) {
    .single.separate-containers .inside-article,
    .single.separate-containers .comments-area,
    .single.separate-containers .page-header,
    .single.separate-containers .paging-navigation,
    .single.one-container .site-content,
    .inside-page-header {
        padding: 30px 50px 120px 140px;
    }
}

[Trạng]

Hi David, it works well with main content area but below comment section, the right sidebar is displayed with mistake.

Screenshot here . Please advise 😀🙏

[David]

Can you share a link to a post where i can see the issue?

[Trạng]

Place the site link in private section. Btw, every single page is affected!

[David]

You have this CSS:

.site-content .is-right-sidebar {
    width: 29%;
}

Remove that, and add it to the code above, so it too is included in the @media ie,

@media(min-width: 769px) {
    .single.separate-containers .inside-article,
    .single.separate-containers .comments-area,
    .single.separate-containers .page-header,
    .single.separate-containers .paging-navigation,
    .single.one-container .site-content,
    .inside-page-header {
        padding: 30px 50px 120px 140px;
    }
    .site-content .is-right-sidebar {
        width: 29%;
    }
}

[Trạng]

Hi David, things work perfectly now! I’m really impressed with your support!

[David]

Glad we can be of help

[Author]

Posts