Twenty sixteen: Remove sidebar and make content width 100%

Hi,

You can use this CSS code to remove the sidebar and make the content full-width.

#secondary {
    display: none;
}

@media screen and (min-width: 56.875em) {
    .content-area {
        width: 100%;
    }
}

Hi Ciprian,

I’ve added your css code (in visual composer wher you can add custom css) but it doesn’t bring my content area to 100% width of the width of the site. Any clues why that might be?

Cheers,
Geerten

It doesn’t work with Visual Composer, the code must be triggered last so it can override the original code and the visual composer CSS doesn’t do that.

Here’s a video how you can use the WP Add Custom CSS plugin and add the code to it:

Hi Ciprian,

Thanks for the tip on your plugin! Simple and easy.
However, it still does not work for me. Not even if I disable the Visual Composer plugin. I’m trying to do this for webpages, not for blog posts. In your Video I saw your example for blog posts. Does that make any difference?

Cheers,
Geerten

Hi,

You didn’t have to disable Visual Composer. The code also works on pages.

If it doesn’t work try this code, I’ve added the !important property to force the CSS styling.

#secondary {
    display: none !important;
}

@media screen and (min-width: 56.875em) {
    .content-area {
        width: 100% !important;
    }
}

Hi Ciprian,

It still doesn’t work. I’m lost.
Strange thing is that Visual Composer is able to override it with a setting, whilst editing it directly in the CSS, or the CSS of VC, or your plugin, does not do anything.
(I can’t use the VC setting, because I want to set it system wide and not per block of the VC.)

Do you have any more clues? I’m using the stock twentysixteen theme and have not changed anything about it. I have created a child theme though, but that has no css setting yet.

Cheers,
Geerten

Can you give me the link to your website? Maybe you have some additional code that interferes with it.

Also, if you have a child theme you can put the code in the style.css file of that child theme.

This is weird!
I figured out why it didn’t work.
I had initially removed all the widgets from the sidebar in order to see if that would make the body content 100% wide (because somewhere in the css it says that this should be the case, see line 3312 in main css). Your code did not work after that. So I just thought that maybe your code would work if the sidebar was active (and thus has at leat one widget) since it is being disabled in your css. And that did the trick! Moving the widgets to the sidebar made it active so that your css could remove it again and make the content 100% wide.

So your css only works if there are widgets in teh sidebar. If the sidebar is empty then your css does not work.

Glad that we figured it out and very thankful for your help!
Much appreciated!

Cheers,
Geerten

Hey Guys, I need to do the same thing, I am pretty new to wordpress ,So I was wandering in which file i need to add this code?

Thanks
Vasu

@vasumangla: If you require assistance then, as per the Forum Welcome, please post your own topic.

Hi
Can anyone help me to get rid of sidebar in twenty sixteen.
Thank u

The solution of User Ciprian Ionita in connection with User gurtvh works.

I pasted the code into my twentysixteen child theme AND put in random stuff in the sidebar widget. Now the website is full width.

You are both angels!

Thanks
Jens

I drag tex widget from content side bar but ie keep its setting and This will clear all items from the inactive widgets list but additional sidebar that appear on the right.
i would like to remove side bar from all the inner template page and using full area of text content and products image also PLEASE SUGGEST.

full length page and remove sidebar and archieve ………….simply great