Too much white space

• 

  rivercitybrassband · Member · Apr 22, 2015 at 1:22 pm

  • Copy link
  • Add topic to favorites

  I would like to condense the amount of space in between the title and body of each page on my site, as well as condense the space in between the site title and the body of the home page in particular. I would love ot get rid of the gray box surrounding the slideshow, or dramatically reduce its size.

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

• 

  staff-jeanpierreac · Staff · Apr 22, 2015 at 2:06 pm

  • Copy link

  Hi!

  You can take the control of the width of this gray box with padding attribute (Distance from it border to the content inside). First value is for top and bottom padding and the second one for horizontal padding (Now it is 180px and 0px) for instance:

  .hero.with-featured-image {padding: 10px 0px;}
  .hero.without-featured-image {padding: 10px 0px;}

  But, if padding-left = padding-right = 0px… why there are gray areas at each side? That’s because the gray box has a defined width of 1230px (inherited from #page width) and the article inside only 930px, so these 300px is auto-distributed to the left and to the right of the article area. You could broaden your entry width:

  .hero.without-featured-image .hentry {
    width: 1130px;
  }

  Ok. Now the other pages, like https://rivercitybrassband.wordpress.com/category/meet-the-musicians/. The idea is basically the same, but with a white background. The page has a 1230px width and your content area only 540px, so the browser need to use a lot of white space on each side. You could try with different width values to see which fits the best what you want. For instance:

  .content-wrapper .content-area {
      width: 540px;
  }

  I hope this helps you. Enjoy Blogging.