Twenty Fourteen theme: how can I remove the left side bar ?

• 

  luxurytravelexpert · Member · Jul 26, 2015 at 11:56 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I want to change my blog from the Hero to the Twenty Fourteen theme. I am preparing the transition (my blog is still featured in the Hero theme). One of the things, I would like it to have is to hide the left side bar

  I found the following CSS which achieves this:
  /* GET RID OF SIDEBAR */
  .featured-content {
  padding-left: 50px;
  }

  .site-main .widecolumn {
  margin-left: 50px;
  margin-right: 15%;
  }

  .site-content {
  margin-left: 50px;
  margin-right: 30%;
  }

  .site:before {
  width: 0;
  }

  #secondary {
  width: 0;
  }

  However, while the left sidebar is gone with that CSS code, the theme is not nicely displayed anymore on a mobile.

  Can someone help ? Or there other ways to hide the left side bar ?

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

• 

  thesacredpath · Member · Jul 28, 2015 at 6:54 pm

  • Copy link

  Hi there, give the following a try instead. It gives you what you want and then keeps the featured content slider at the top of the page the proper width. If you plan on using the featured content slider at the top, then we need to keep the overall width of the content area consistent with the original so that part of the next image in the slider doesn’t appear on the right end of the one that is showing.

  #secondary {
      display: none;
  }
  .search-box-wrapper, .featured-content {
      padding-left: 0;
  }
  .site:before {
      display: none;
  }
  .site, .site-header {
      max-width: 1038px;
  }
  .site-content, .site-main .widecolumn {
      margin-left: 0;
  }

• 

  thesacredpath · Member · Jul 28, 2015 at 7:01 pm

  • Copy link

  Oops, one more addition for static pages.

  .page .entry-content {
      margin-right: 0;
      max-width: 696px;
  }

• 

  luxurytravelexpert · Member · Jul 28, 2015 at 11:27 pm

  • Copy link

  Thank you so much for your quick reply! Wow, so helpful.

  I will use the featured content slider at the top indeed. Do I have to add something to the CSS? Because sometimes, the part of the next image in the slider does appear on the right end of the one that is showing (at least in the ‘live preview’; I did not activate the theme yet).

  Could I perhaps ask you one other question (since you seem to know to much about the theme). When I change the background of the Twenty Fourteen default theme from white to black, this also updates the color on the slider text area. It actually does that no matter what color you select. What am i doing wrong or how can I prevent this, since I want to have a black background, but I don’t want to change the black background color of the slider text area?

  Your help is much appreciated!

• 

  luxurytravelexpert · Member · Jul 30, 2015 at 12:05 am

  • Copy link

  Dear “thesacredpath”,

  I switched my theme now to Twenty Fourteen.

  I currently still have the left side bar, because when I apply your CSS code, the part of the next image in the slider does appear on the right end of the one that is showing . In addition, the slider is loading very slowly.

  Any suggestions how I can solve this problem(s), as I want to get rid of the left side bar (but with a nice display of the photos in my header, without overlap).

  Many thanks!

• 

  luxurytravelexpert · Member · Jul 30, 2015 at 12:06 am

  • Copy link

  PS: after getting rid of the left side bar, I would also like to have a content width of 640 px (instead of the default 474). Thx!

• 

  thesacredpath · Member · Jul 30, 2015 at 10:00 pm

  • Copy link

  Hmmm, the code I have works on the demo site. I see you are back to MH Magazine.

  Here is a screenshot off the demo site for Twenty Fourteen with the CSS I gave: https://cldup.com/9Kv84VLEP8.png

  With the above CSS, and the addition of the following, your content area goes to a maximum of about 610px since there is 30px of left and right padding.

  .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
      max-width: 100%;
      margin-right: 00px;
  }

  The featured image stuff at the top ends up keeping us from going any wider on the content, unless you would narrow the right sidebar or decrease the space between the sidebar and the content. I think it looks nice with that white space in between the two elements.

  If you add this all back in and still see the issue with the featured content image, I’ll have to look at your site and see what is happening. On the demo site, the above works just fine.