Making sidebar margin narrower

• 

  mariaandantara · Member · Apr 2, 2017 at 11:59 pm

  • Copy link
  • Add topic to favorites

  Hi: I have been struggling to make my sidebar margin narrower – I tried the following CSS code:

  .sidebar {
  width: X%;
  }
  but that only moved the text within the sidebar, not the actual margin.

  I am using the Rowling theme, if that helps.

• 

  otpidusprime · Member · Apr 3, 2017 at 9:28 am

  • Copy link

  Hi,
  It is happening because the sidebar itself is wrapped inside a parent wrapper div which has a fixed width of 1200px(which adds the huge right-margin to the sidebar).
  The parent wrapper has CSS code like this:

  .section-inner {
      max-width: 88%;
      margin: 0 auto;
      width: 1200px;
  }

  So, if you remove the fixed width and set the max-width to a higher value like this:

  .section-inner {
      max-width: 95%;
      margin: 0 auto;
  }

  And then change the width percentages of the main content wrapper and the sidebar:

  // main content wrapper changed from 72% to 80%
  .content {
      width: 80%;
      float: left;
  }
  // sidebar wrapper changed from 27% to 20%
  .sidebar {
      position: relative;
      float: left;
      width: 170px;
      color: blue;
      font-size: 90%;
      display: inline;
      font-weight: 700;
      line-height: 20px;
      width: 20%;
  }

  Now, there’s this :after pseudo class used to add the sidebar background color and the border, change it – so that it fit’s the reduced size of the sidebar:

  .wrapper:after {
      background: #f1f1f1;
      border-left: 1px solid rgba(0,0,0,0.2);
      bottom: 0;
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 18.5%; // changed from 28.5% to 18.5%
      z-index: -1;
  }

  Hope this helps :)

• 

  mariaandantara · Member · Apr 3, 2017 at 3:59 pm

  • Copy link

  Thank you so much for the response! That code did move the wrapper border further to the right. However, the sidebar area still has a gray margin extending into the main content area and equal to the previous width of the sidebar – so when I apply that code, the border seems to move to the right, but the text of the main content now extends from the white main content area into the gray one on the right. For now I returned to the old width settings, until I figure this out.

  Maybe a way to handle this would be to make the color of the sidebar white as well, though I’m not sure how to do that.

  I really appreciate the help!

• 

  otpidusprime · Member · Apr 4, 2017 at 7:12 am

  • Copy link

  Well, i am not able to view your site anymore so that i can help you further with your issue. Maybe you can provide me a link to your site so that i can help?

  I am glad i was able to help though :)

• 

  otpidusprime · Member · Apr 4, 2017 at 7:21 am

  • Copy link

  Okay, i got it. There was some glitch i suppose.

  So here’s the screenshot of what you site looks like after you make all the CSS changes i suggested:
  http://image.prntscr.com/image/ce9bf7fe78af47c89ae140b9f499cee8.jpg

  Does this work for you?

  If it does, then make all the changes as i suggested before, and then also make the changes to this CSS code:

  .content:before {
      content: "";
      background: #fff;
      bottom: 0;
      left: -10000px;
      position: absolute;
      right: 18.5%;  // changed from 28.5% to 18.5%
      top: 0;
      z-index: -9999;
  }

  This code is the reason why you had the

  gray margin extending into the main content area

  . I forgot to mention this before. Sorry for that.

  Hope this helps now :)

• 

  mariaandantara · Member · Apr 6, 2017 at 2:09 pm

  • Copy link

  That worked! Thank you so much for the help, I had been trying to fix this for a long time!