Customizing the Sidebar

[IntesarJ]

Hello there!

I’ve been using this bit of code to increase the whitespace I have on either side of my posts.

.single-post .x-container.max.offset { max-width: 850px; width: 100%; }

When I add a sidebar to my content, the post width reduces to 72% and the sidebar occupies the rest 28% of the 850px.
Is there a way where I can keep the content width to 100% aligned centrally and the sidebar on the right.
That is to say, I don’t want the sidebar to be a part of the content. Rather I want it to occupy an entirely different area on the right.

Thank you.

[jade]

Hi Intesar,

The main content and the sidebar area are in the same content area (or div) that is why they are sharing the same area and adjusts their sizes depending on the size of the area where there are both in.

What you can do is to add more custom CSS that is specific when the single post has a sidebar then set the sidebar with an absolute position so that you can manually set its location like this:

.single-post.x-content-sidebar-active .x-main {
    width: 100%;
}

.single-post.x-content-sidebar-active .x-sidebar {
    width: 28%;
    position: absolute;
    right: 0;
}

Please note that the code above will be the starting point and you might need to customize it further to achieve your desired layout.

Hope this helps.

[IntesarJ]

Thanks @Jade. But unfortunately, the sidebar now appears under the content instead of being on the right. What should I change?

[jade]

Hi Intesar,

I tried checking the site that is attached to the license page of your account but I cannot see a post with a sidebar. Is there a chance that you can provide a link where the content with a sidebar so that we can check it and provide you with suggestions?

Thank you.

[IntesarJ]

Oh, I just removed the sidebar I while ago.

I’ve put it again for you to check.

Here’s a link:

https://www.theintesarjawadblog.com/tset-post/

[jade]

Hi Intersar,

You placed an incorrect code in the styles. Kindly double check and make sure that you copied correctly the previous code I suggested. Also, you might want to change the width of the sidebar through the code from 28% as suggested to something smaller.

Hope this helps.

[IntesarJ]

It’s working perfectly now. I had to decrease the max-width of the content to 750px and the sidebar width to 20% to make the sidebar appear on the right side.

Thanks a lot, @Jade. You’re the best.

[jade]

You’re most welcome, Intesar.

Have a nice week ahead!