Adjusting Sidebar width to be full width and to the right

Hello, I cannot find a solution to use all the space I have for my sidebar. It is pushed to the left towards my content and there is a lot of unused space at its right. Is there a way to use my sidebar full width? Many thanks in advance

Hi Stephanie,

Thanks for writing in!

Please check out this screenshot first:

In between the red lines is the content container. It is then divided into 88% for the content area and 12% for the sidebar. If you want to increase the sidebar width, simply go to X Theme Options > Layout And Design > Content Width. The sidebar area is equivalent to 100% - the content width.

Hope this helps.

Thank you for answering. I already figured that out. The problem is that when I am on my blog posts, the sidebar seems to be pushed to the left towards my content leaving a lot of empty space to the right. I would like my sidebar to use 100% width of the 12% it has. It seems like it’s using only 5%. Hope this clarifies the problem.

Hi @StephanieBelec,

Try the 16% instead of 12%. Example, you can add this to Theme Options > CSS

@media ( min-width: 980px ) {
.blog .x-sidebar {
    width: 16.536945%;
}
}

Hope this helps :slight_smile:

It didn’t work, but I just increased the site max width to 1300px and I don’t know why but it seems to have worked. Thanks again for your time

Hi Stephanie,

There is perhaps some CSS error in the codes that you have in the Global CSS. To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Cheers!!

To be honest im a complete newbie when it comes down to css and code. I have added one or two at some points and then I got lost in the process. I dont even know what I need and don’t need. Here are the code I added in my xtheme - options - css:

.x-iso-container-posts .entry-wrap .entry-content.excerpt {
display: none;
}

.x-recent-posts .x-recent-posts-img {
background-size: contain;
}

I have added another code on my homepage in cornerstone but I cant paste it here (it doesnt work). It’s for google analytics begining with: Global site tag - google analytics, script async…

Hi Stephanie,

That custom CSS is good, no error with that and it has nothing to do with the content and sidebar width.

It’s strange that your sidebar has a fixed height though, do you have this plugin (Q2W3 Fixed Widget)? Would you mind deactivating this and see if this resolves the issue.

If not, please provide us login credentials in a Secure note so we can take a closer look.

That too has nothing to do with the content and sidebar width, but since that is a Javascript, please moved that to Page > JS area.

Let us know how it goes,
Cheers!

Thank you for telling me it was Javascript smh. I tried deactivating the Q2w3 fixed widget and then adding the code but it didn’t work. Is there a css code to have a fixed floating sidebar without the widget? Tried some I found on the internet, but didn’t work. It would be greatly appreciated.

Hey Stephanie,

Sorry for the confusion here after Ruenels’ reply. Let’s go back to his response as it is the correct answer’s why your sidebar is narrow.

Now to your concern or question after Ruenel’s reply:

That is not possible because if you look at Ruenel’s screenshot, the content and sidebar is contained within the Content Container. Imagine if the sidebar gets overflows outside of that container. The overall layout would be off-center. That is why the only option offered by our theme to adjust the sidebar is you adjust the Content Width.

I just have a small correction to Ruenel’s answer. There is more or less a 5% gap between the content and the sidebar so if you set the Content Width to 80, the content’s width would actually be around 77.5% then the sidebar, 17.5% so that gap is around 5%.

You can override that 5% using Rad’s code but it currently does not work because your blog page is not actually a standard blog but just a regular page containing a third party recent post shortcode. You need to add blog as a Body Class of the page. You can find that under the Page Settings. Only then will the code work.

And regarding the code, remember that you only have 5% gap between the content and the sidebar. If you increase the width of the sidebar passed that value, the layout would break. If you also use all that gap, your sidebar will stick to your content. I believe you would not want that also.

Lastly, please note that the code we’ve showed you here is only a sample. That’s not a part of our product support. It was given only to help you understand the theme’s structure. We will not cover issues that will arise from the use of that nor provide any enhancements.

Hope that helps and thank you for understanding.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.