In full width website design: how to force two columns?

[amaravati]

Hi

We currently use the two column approach on our website see this: https://www.amaravati.org/online-teachings-from-the-family-events/

Here you see a ‘empty’ right column. That is because some changes were made, and we want to set the overall setting to full-width. However only on a select few pages we still want to keep two column like here:

https://www.amaravati.org/dhamma-books/

‘SOLO UNO MÁS…’ » Amaravati Buddhist Monastery

Is it possible to use CSS to make these pages still follow the 2 column and the rest of the site back to full width?

thanks

[ruenel]

Hello @Amaravati,

Thanks for posting in!

This is a post, https://www.amaravati.org/online-teachings-from-the-family-events/. It is using the global content layout settings which can be found in X > Theme Options > Layout and Design > Content Layout. Once you set this to “Fullwidth”, all of the other site pages will become fullwidth and you cannot override it. The only way you can accomplish what you have in mind is to use a custom CSS.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. What you need to find is the default post-class, the container class of the content area, and of the sidebar. Therefore your custom code will be:

.post-template-default .x-main {
    width: 100%;
}

.post-template-default .x-sidebar {
    display: none;
}

This code will only affect the single blog posts. Other pages will still display the sidebar.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer. The given code serves as an example that will get you started with your modifications.

Thank you for your understanding.

[amaravati]

Thanks for your reply! It might be better to hide the sidebar at this moment with this method. I will look into the CSS selector for that.

[jade]

You’re welcome @amaravati.