Need help? Check out our Support site, then

Removing Sidebar from specific pages with CSS

  1. How can I remove the sidebar with CSS from specific pages? I have worked out that I can make it completely invisible but unfortunately only for the whole site.


    The blog I need help with is

  2. What you'll need to do is open the page where you would like to hide it and view the page source in your browser. Find the body tag and look at the classes. One of the classes will be unique and you can use that in y our CSS selector to target just that page.

    For example, on this page:

    The body tag has a class called "page-id-222". So you can use this CSS to hide the sidebar and make the main content area wider for just that page:

    .page-id-222 #secondary-content {
    	display: none;
    .page-id-222 #primary-content {
    	width: 100%;

    Note that you may need to adjust the width setting to whatever looks best to you.

  3. Thanks so much! It works! I've applied it to the page that you suggested and I have tried to do it on another page but I'm not sure I understand which is the page-id? If you look at the homepage of my site... which one would it be?

    For example, I thought that the page id for 'The Red Bus Sessions' page was 254 as far as I can see but it doesn't seem to work...?

    Thanks so much!

  4. Oh I have managed to work it out on all pages but 'Latest' - for the life of me I can't find the Id!


  5. Does .blog work for your Latest page?

Topic Closed

This topic has been closed to new replies.

About this Topic