widen wrapper in responsive theme

• 

  preventiondiaries · Member · Aug 10, 2016 at 7:31 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m working on this page: https://preventiondiaries.com/

  This site looks great on a tablet or mobile view, but I would like to widen the wrapper when viewed on a PC so that the viewer sees more white space versus orange space.

  Any suggestions?

  Thanks,
  C

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

• 

  thesacredpath · Member · Aug 11, 2016 at 8:35 am

  • Copy link

  Hi there, the following will allow you to widen the overall width of your site. It is 960px now and you can adjust that as you see fit.

  #container {
      max-width: 960px;
  }

  I will mention though that when text gets wide, it becomes harder to read. In general, a good rule of thumb is 500-750 pixels in width. It’s actually more complicated than that, but that works as a general rule. Right now your text area overall width excluding the left/right padding is 910px, which is wider. I just thought I would pass that along.

• 

  preventiondiaries · Member · Aug 11, 2016 at 5:47 pm

  • Copy link

  Thank you @thesacredpath!

  Do you know of any other elegant solutions that would increase the width of my white space (not necessarily the wrapper) that would not affect the width of the text?

• 

  thesacredpath · Member · Aug 11, 2016 at 7:09 pm

  • Copy link

  Give this a try. It increases the width of the overall container by 100px and then adds 50px of left and right padding to the inner content wrapper. I’ve done this inside of a Media Query, which limits this change to 860px and wider screens so that on tablets, there isn’t too much white space to the left and right of the content. Add this at the very end of your custom CSS.

  @media screen and (min-width: 860px) {
  	#container {
  		max-width: 1060px;
  	}
  	#wrapper {
  		padding-left: 50px;
  		padding-right: 50px;
  	}
  }

• 

  preventiondiaries · Member · Aug 11, 2016 at 8:32 pm

  • Copy link

  Yes that is PERFECT! Thank you so much, great, great solution!

• 

  thesacredpath · Member · Aug 11, 2016 at 11:32 pm

  • Copy link

  Hooray and you are welcome!