Archived topic

How to seperate content padding in single post page vs archive page

11 replies · Started by Trạng on August 26, 2021

Viewing posts 1–12 of 12

August 26, 2021 at 8:59 am #1909378

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?

August 26, 2021 at 9:31 am #1909412

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

August 27, 2021 at 9:26 pm #1910612

Wow thanks Leo! Love your support!

August 28, 2021 at 9:44 am #1911125

No problem :)

August 28, 2021 at 11:26 pm #1911367

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

August 29, 2021 at 4:38 am #1911526

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

August 29, 2021 at 4:49 am #1911537

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

Screenshot here . Please advise 😀🙏

August 29, 2021 at 5:06 am #1911552

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

August 29, 2021 at 5:07 am #1911557

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

August 29, 2021 at 5:39 am #1911573

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

August 29, 2021 at 5:47 am #1911581

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

August 29, 2021 at 6:10 am #1911597

Glad we can be of help

This archived topic is closed to new replies.

Start building better websites today.