increase content window width

• 

  lisamalecha12710nn · Member · Sep 30, 2014 at 8:33 pm

  • Copy link
  • Add topic to favorites

  How do I increase the size of the main content window, so that it fills the page better and my readers don’t have to scroll down so much. Visually there is too much gray area on to the outside of the content column and the widgets.

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

• 

  thesacredpath · Member · Oct 1, 2014 at 6:44 pm

  • Copy link

  Hi there, Superhero is a responsive width theme which means it is designed to look good on all screen sizes and devices from large desktop monitors all the way down to smart phones. The current maximum width for the post content area on Superhero is 695px, which is within the range of what is considered to be the maximum width for reading text comfortably. The following increase the overall width of your site from 960px to 1260px (a 300px increase) and then increases the content area by 300px. I have limited this change to browser window/device widths of 768px and above since that is when the responsive design moves the sidebar down below the content area so that your content maintains maximum readability on tablets and phones.

  @media screen and (min-width: 768px) {
  #main {
      max-width: 1260px;
      width: 100%;
  }
  #primary {
      width: 76%;
  }
  #secondary {
      width: 21%;
  }
  }

  If you choose to use the above as it is, in the “Content Width” field below the CSS edit box at Appearance > Customize > CSS, enter 900 as the maximum image width so that image inserted at “full size” will span the entire post/page content area.

  If you wish to adjust the overall width, you can adjust the 1260px value in #main. For the content width value, add or remove from the 900 number the amount you add or remove from the 1260 value.