Remove siderbar from pages and stretch primary content

  • Hi.
    I’d like to display the sidebar only on the blog page.

    I modified page.php (on a child theme) to be:

    <?php if ( ( is_page(‘5‘) ) ) { ?>
<?php get_sidebar(); ?>
<?php } ?>

    However, the primary content area doesn’t stretch to the right to fill the whole width.
    I could’ potentially, remove width: 750px; for the .content-area in the css file, but that probably won’t work for the blog page.
    What’s the elegant and right way to do this?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @morsagmon,
    Can you post url of your website, it would be easier to see and try to resolve issue
    Thanks

    If you have no sidebar managed as you would like it to have then:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    .home .content-area {
    width: 100%;
}

or

.home .content-area {
    width: 100%!important;
}

    I hope it is helpful.
    It was working here.
    I installed your Theme on my server and without any modification changed just this CSS and here is a SCREENSHOT
    Cheers
    @tahoerock

    • This reply was modified 8 years, 1 month ago by Tahoerock.
    Thread Starter morsagmon

    (@morsagmon)

    Thanks, @tahoerock.

    I added as per your suggestion.
    For some reason, it now owkrs fine only on the home page (stretches to 100%) and the blog page (showing the sidebar on the right).
    It is not stretching on the two other pages.
    Please see here:
    MySite

    Hi morsagmon,

    For some reason, it now owkrs fine only on the home page (stretches to 100%) and the blog page (showing the sidebar on the right).

    YES, that was what I was thinking you want, just home page to have wide content.
    If you need other pages to have wide content and BLOG page to have 750px+sidebar, we have to work it out.
    Thanks for sharing the link to your page, it is helpful.

    Solution is like this:
    You need to say that this page and that page I want to have 100% content, so you preserv BLOG page to unwanted behaviour.
    This can be done by page ID No. like .page-id-6 that is added before the class of the element you want to tweak, in this case .content-area class
    When you take a look to classes in body element there is no DOT. IT is important to add DOT before any class name so it know that this is class not ID
    For ID is used #. So even it says page-id-6 it is class.
    In your NOW case it is :
    .page-id-6 = Contact Us
    .page-id-2 = Sample Page
    Whenever you add new page you will have to add the css code for that particular page.
    ID or as shoyld be said CLASS for that page you will find next to the BODY element in Chrome Development tools window

    SO:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    .page-id-6 .content-area {
    width: 100%;
}

.page-id-2 .content-area {
    width: 100%;
}

or

.page-id-6 .content-area {
    width: 100%!important;
}

.page-id-2 .content-area {
    width: 100%!important;
}

    I hope I was helpful.
    Cheers
    @tahoerock

    Thread Starter morsagmon

    (@morsagmon)

    Thanks!

    There must be another logic to do this without spcifically marking each page.
    The blog page has its own ID, so we can probably turn this around and have all behave with 100% and just for the blog (where exists “secondary” element) reduce to 750 the primary.

    I could not find the home class you included in your first solution. Where is it in the style.css?
    I removed .home from the css you suggested and all pages look good with 100%, but the blog page now has the sidebar under the primary area (which stretches also to 100%, thus pushes the sidebar below).

    Thanks!
    Mor

    Hi Mor,
    YES you are right, I took this path that you can have better control over it, in the future you can forget what you did and then???
    That is all
    Lets do it other way ?? :
    Once you have all pages 100% then
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.

    .blog .content-area {
    width: 750px;
}

or

.blog .content-area {
    width: 750px!important;
}

    !!!!!! keep this code as last one in the file or let say after code I gave to you before for other pages.!!!!
    While You have to use !important property in previous case it can cause problems.
    To use !important property is last call to do. !!!!!!!!!!
    There should not be usage of it as it is possible.

    …and do not forget that You need to have all responsive to be seen right way on different resolution/devices.

    For that reason would be better to you %

    .blog .content-area {
    width: 60%;
}

or

.blog .content-area {
    width: 60%!important;
}

    So how is this working for you??
    Cheers
    @tahoerock

    • This reply was modified 8 years, 1 month ago by Tahoerock.
    • This reply was modified 8 years, 1 month ago by Tahoerock.
    Thread Starter morsagmon

    (@morsagmon)

    Yes, that did the trick.

    Here’s the final CSS snippet:

    .content-area {
    width: 100%;

}

.blog .content-area {
    width: 65%;
}

    Many thanks!

    You welcome, Im glad that we found satisfaction.
    Cheers
    @tahoerock

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove siderbar from pages and stretch primary content’ is closed to new replies.

Tags