Sidebar width only on blog page

Support
#1

Hi there,

I’m trying to widen the sidebar and only have the sidebar appear on the blog page (other pages were built with cornerstone, full width, etc.). I can’t seem to find the right balance within the container on the page.

The page is hidden behind ‘under construction’ (as per the client’s wishes) so you’ll need a login to view it. Please message me directly and I will create a login for you.

Thanks

#2

Hello Carl,

Thanks for writing in!

The sidebar width depends on the content width. It is the difference of the total width less than the content width that you have set in X/Pro > Theme Options > Layout and Design > Content Width. By default, the content width is set at 72% which means that your sidebar width is approximately 28%. Feel free to reduce the content width so that the sidebar width will become wider.

Hope this helps.

#3

Thanks for the reply. I think I wasn’t clear with my question – I’m looking to adjust this only on the blog page, not each page. Is that possible?

Thanks

#4

Hello Carl,

To avoid from confusion, can you please send us the URLS where you want to have a sidebar and the pages that do not need a sidebar? This is to make sure that we are on the same page here.

Thank you for your understanding.

#5

I’ll need to give you a login since the site is hidden behind an ‘under construction’ page. Can you direct message me and then I"ll share it with you?

Thanks

#6

Hey Carl,

You can use the Secure Note feature of our forum to post sensitive information.

Thanks.

#7

Hey Carl,

I tried to login with the given credentials but the password for the given username isn’t correct, please double check the credentials. To change the content and sidebar width on blog page only, you can make use of the following code by adding it in the Theme Options > CSS:

.blog .x-sidebar {
    width: 40%;
}
.blog .x-main {
    width: 55%;
}

You can adjust the values as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#8

Thanks for this, seems to be working. How would I also apply this to the posts?

#9

Hey Carl,

To apply it to the posts as well, please update the previous code with the following code:

.blog .x-sidebar,
.single-post .x-sidebar {
    width: 40%;
}
.blog .x-main, 
.single-post .x-main {
    width: 55%;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#10

Got it, thanks again!

#11

Glad we could help.

Cheers!

#12

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