Remove sidebar and black space above blog

• 

  karinkoolen · Member · Jul 12, 2015 at 5:33 pm

  • Copy link
  • Add topic to favorites

  Hi there!
  Today I activated a new theme for my wordpress.com blog: Canard. Lovin’ it!

  But, I would like to remove the sidebar on the page/post-sites, AND I would like to decrease the blanc space right above my header.
  I’ve tried my old CSS but is does not seem to work. Does any of you have any ideas about the CSS I should use?

  It would be a great help! Thank you very much!

  greetz
  Karin

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

• 

  ehtis · Staff · Jul 12, 2015 at 8:44 pm

  • Copy link

  Karin, if you want the sidebar gone (the one with search and category widgets), I’d say a better option would be to remove all the widgets from it and it won’t show anymore.

  To do that, go to Dashboard > Customize > Widgets > Sidebar.

  And to modify that blank space, use this code:

  .site-branding {
    margin-top: -20px;
  }
  
  .search-navigation {
    margin-top: 15px;
  }

  Adjust .site-branding for header position and .search-navigation for menu.

• 

  karinkoolen · Member · Jul 12, 2015 at 8:49 pm

  • Copy link

  Thanks for your reply, Ehtis. But I would just have it removed for the content page, where the posts are. For the homepage, I wanna keep it.

  Do I need an extra code?

  Thank you!

• 

  ehtis · Staff · Jul 12, 2015 at 9:29 pm

  • Copy link

  This will hide the sidebar from all posts/pages:

  .single .widget-area {
  	display: none;
  }
  .single #main {
  	width: 960px;
  }
  
  .page .widget-area {
  	display: none;
  }
  .page #main {
  	width: 960px;
  }

  .single refers to individual posts, .page is self-explanatory. :)

• 

  karinkoolen · Member · Jul 12, 2015 at 9:43 pm

  • Copy link

  Sidebar is gone, Ehtis! When I’m changin the CSS the page looks exactly like I want, but when I open a post afterward (like this: http://karinkoolen.com/2015/02/16/wat-mannen-kunnen-leren-van-50-tinten-grijs/) the content box is still very small. How can I widen it, so it will fit the middle and the right part of the screen? I’ve tried a few things, but can’t manage it…

  Thank you!

• 

  karinkoolen · Member · Jul 12, 2015 at 9:43 pm

  • Copy link

  I mean: the content BAR ;-)

• 

  ehtis · Staff · Jul 12, 2015 at 10:44 pm

  • Copy link

  Forgot to remove the border! Add the following below the previous code:

  .single #main, .page #main{
  	border:none;
  }
  .single .entry-content, .page .entry-content{
  	width: 960px;
  	margin-left: -10px;
  }

  You can position the content and adjust its width in .entry-content.

• 

  karinkoolen · Member · Jul 12, 2015 at 11:05 pm

  • Copy link

  Thank you so much! I’ve changed the margins a bit and now it’s exactly how I had in mind – so I can go to sleep ;-)

  ciao!

• 

  ehtis · Staff · Jul 12, 2015 at 11:25 pm

  • Copy link

  No problemo!

  P.S. Nice review there of 50 shades. :)

• 

  karinkoolen · Member · Jul 27, 2015 at 10:56 am

  • Copy link

  Hi there,
  I’m back!

  The CSS as was mentioned above worked really well on my laptop, but… when I opened my site on iPhone or tablet, all the content appeared weird and I had to scroll left and right to see all the content. Is there a way using this code – or another code – that will fit iphone and tablet as well…

  Thank you so much!

• 

  ehtis · Staff · Jul 27, 2015 at 12:39 pm

  • Copy link

  Hi again!

  We can limit the CSS changes to desktop/laptop sized screens only, that way appearance won’t be disturbed on mobile or tablet browsers.

  I’m going to wrap all of the above code in this @media query:

  @media screen and (min-width: 768px) {
  
  //insert all code here which affects mobile
  }

  Here’s the final version:

  @media screen and (min-width: 768px) {
  
  .single .widget-area {
  	display: none;
  }
  .single #main {
  	width: 960px;
  }
  
  .page .widget-area {
  	display: none;
  }
  .page #main {
  	width: 960px;
  }
  
  .single #main, .page #main{
  	border:none;
  }
  .single .entry-content, .page .entry-content{
  	width: 960px;
  	margin-left: -10px;
  }
  
  }

• 

  karinkoolen · Member · Jul 27, 2015 at 12:48 pm

  • Copy link

  Great code, thanks!
  It works for the mobile, not for the tablet yet, though…

• 

  karinkoolen · Member · Jul 27, 2015 at 1:02 pm

  • Copy link

  I’ve fixed it, ehtis! Thanks for your help again!

  Ciao!

• 

  ehtis · Staff · Jul 27, 2015 at 4:42 pm

  • Copy link

  Awesome, you’re welcome! :)