Changing overall theme width in CSS

• 

  cameronwgt · Member · Mar 1, 2016 at 12:58 pm

  • Copy link
  • Add topic to favorites

  I’m having issues trying to narrow the width of my blog. All the code I’ve used narrows the header but stuff like the widgets, menus and buttons are unaffected.. Please help!

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

• 

  thesacredpath · Member · Mar 1, 2016 at 9:15 pm

  • Copy link

  Hi there, originally the #page div had a max width of 1230px. You can use the following and adjust the max-width as desired. I arbitrarily used 800px in my testing.

  .theme-style-box .site-wrapper, .container {
      max-width: 800px;
      width: 100%;
  }

• 

  cameronwgt · Member · Mar 3, 2016 at 10:06 am

  • Copy link

  Great Thankyou! I’m also having an issue with the hero box only on the home page. It seems to be a lot bigger than on the Pages or Blog posts (which look better).

  I use firebug to find the areas but it just says inherit as a size. Is there a way I can edit this is it just a px value?

  Cheers

• 

  thesacredpath · Member · Mar 3, 2016 at 9:09 pm

  • Copy link

  Awesome, and you are welcome.

  On the main page, there is a different height set for the hero section. I looked at one of your other pages and got the height for that and then we can set the height for the main page to the same with the following.

  .site-hero-big .site-hero {
      height: 600px;
  }

• 

  cameronwgt · Member · Mar 7, 2016 at 11:54 am

  • Copy link

  Thanks again! This worked perfectly although the text in the hero box is now not central. I’ve used:

  entry-title-site-hero {
      vertical-align: inherit;
  }

  But this doesn’t work once live.

• 

  cameronwgt · Member · Mar 7, 2016 at 12:15 pm

  • Copy link

  no worries, fixed it

• 

  sarahblackstock · Member · Mar 7, 2016 at 5:39 pm

  • Copy link

  Glad you got it sorted out! :)