How to hide the side bar when full screen

  • Unknown's avatar
    breakandtrek · Member ·

    Hello again,
    When I am on full screen, there is a sidebar on the right, which make that my website is all in the left and there is a big empty on the right…. Well, am I clear ? can you help ?
    Thank you in advance,
    Best regards.
    Stéphanie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    yashitamittal · Member ·

    Hi Stéphanie,

    I can see the empty spaces on the right at certain screen sizes on your website totoko.fr.

    I notice you have added custom CSS in your website.
    For eg – This is a media query from your website in which you have constrained the width to 872px. So, on large screen sizes, there is empty space on your site.

    
@media screen and (min-width: 55em)
.no-sidebar .site {
     max-width: 872px; 
    padding: 54px 108px;
}

    You can add margin: 0 auto; to this code so that the page block stays in the center and the empty space is divided evenly on both sides.

    Or you can remove this code if you want your website to look like the demo website – https://wordpress.com/theme/penscratch-2

    Hope this helps and let me know if you have any more questions.

  • Unknown's avatar
    breakandtrek · Member ·

    Hello,
    Thank you very much. I add ths css code and it works, thank you. Where do i need to go if i want to remove the code to look like the demo please ?
    Thank you in advance,
    Best regards,

  • Unknown's avatar
    yashitamittal · Member ·

    I am sorry, my observation was wrong earlier.
    Those media queries are already a part of your theme.

    I will try to have a look again in my free time.

  • Unknown's avatar
    yashitamittal · Member ·

    The custom CSS which you have added to your website at
    CSS Editor in My Sites → Customize → CSS is
    .no-sidebar .site{max-width:872px;padding:54px 108px;margin:0 auto}

    I don’t think this is necessary as it is overriding the media query added in your theme.

    There are media queries which are loaded at different screen sizes, one at 55em and other at 75em, in Penscratch 2 theme. They are setting the width of the content area on your site.

    On my test website, the media query for screen size 55em never loads (which is restricting the width of the content area and adding spaces on the sides), so my test site looks exactly as the demo.

    I am not able to find the cause of it and not able to reproduce the issue.
    So I am adding modlook tag in the sidebar for staff assistance.

    Thanks for your patience.

  • Unknown's avatar
    breakandtrek · Member ·

    Thank you. Let’s wait so !

  • supernovia · Staff ·

    Hi folks, so, the no-sidebar CSS is only applied if you don’t have a sidebar. The demo has a sidebar on every page, so it doesn’t display this CSS.

    It does look, though, like the page is off-center if it isn’t using a sidebar on a default installation. I’ll file a bug on this.

    @breakandtrek in the meantime, is the CSS you’ve alright for now, or do you need more help?

  • laurelfulford · Staff ·

    Thanks for letting us know about this, @breakandtrek!

    I just wanted to follow up and let you know this issue has been fixed in the Penscratch 2 theme, so the page no longer looks offcentre at certain screen sizes.

    If you have any questions at all about the above, just let us know!

  • The topic ‘How to hide the side bar when full screen’ is closed to new replies.