REMOVING CONTENT SIDEBAR TO WIDENED MY BLOG POSTS

• 

  xyzagerondio · Member · Apr 7, 2016 at 3:59 am

  • Copy link
  • Add topic to favorites

  Hello!

  I am using the Twenty Fourteen Theme & the theme provides 3 sidebar areas: the primary, content & footer sidebar.

  I would like to hide the “content sidebar” when I click on my single blog posts. I mean, in my main site all the sidebars will be visible but when visitors will click on my single blog posts–no content sidebar will appear. So that the images will be more larger & more visible. And the space will be fully occupied with my posts.

  Kindly help me with some CSS to make this happen. Thank you so much in advance! :)

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

• 

  thesacredpath · Member · Apr 7, 2016 at 11:58 pm

  • Copy link

  Hi there, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.

  .single .content-sidebar {
      display: none;
  }
  .single .site-content {
      margin-right: 0;
  }
  .single .site-content .hentry.has-post-thumbnail {
      width: 100%;
      max-width: 100%;
  }
  .single .post-thumbnail img {
      width: 100%;
  }
  .single .site-content .entry-header, .single .site-content .entry-content, .single .site-content .entry-summary, .single .site-content .entry-meta {
      max-width: 874px;
  }

• 

  xyzagerondio · Member · Apr 8, 2016 at 4:36 am

  • Copy link

  Wow! Thank you Mr. Sacred Path….it worked!!! :)

  One last thing Sir, my images size is still the same. How could I adjust it to fill out the space?

  Please help, one last time! Thank you so much!!! :)

• 

  thesacredpath · Member · Apr 8, 2016 at 6:40 am

  • Copy link

  Oh sorry, I forgot to mention this. At Customize > CSS, in the Media Width field below the CSS edit area, enter 874 and everything should be good once you save and refresh your page. If it isn’t, clear your browser cache and then refresh take another look.

• 

  xyzagerondio · Member · Apr 8, 2016 at 7:40 am

  • Copy link

  You are awesome Sir!!! It all worked!!! :) Thank thank you so much! I really appreciate you’re help Mr. Sacred Path! :)

• 

  xyzagerondio · Member · Apr 8, 2016 at 2:04 pm

  • Copy link

  Hello again! My blog is way more awesome now. Thanks to you Mr. Sacred Path :) :) :)

  But just now, I was able to discover that the “comments area” below my blog posts is awkwardly aligning to the right side. Can you help me with this Sir?

  I’m really sorry for always disturbing you Sir. Thank you in advance! :D

• 

  thesacredpath · Member · Apr 8, 2016 at 8:28 pm

  • Copy link

  Ah, replace the last rule I gave with this, which adds a couple more CSS selectors to take care of the comments and post navigation.

  .single .site-content .entry-header, .single .site-content .entry-content, .single .site-content .entry-summary, .single .site-content .entry-meta, .comments-area, .post-navigation, .image-navigation {
      max-width: 874px;
  }

• 

  xyzagerondio · Member · Apr 9, 2016 at 2:26 am

  • Copy link

  Yay! It all worked! Really really well! Thank you Sir! You are the best!!! :D

• 

  thesacredpath · Member · Apr 9, 2016 at 2:39 am

  • Copy link

  Hooray and you are welcome!