CSS changes to adjust outer page margins – Misty Lake

• 

  howardpublicschool · Member · Sep 1, 2013 at 12:43 am

  • Copy link
  • Add topic to favorites

  Hi all,
  I’m using the Misty Lake theme and have the custom design upgrade.

  I have changed the background colour for the site and now I don’t like the dimensions of the inner pale green area.

  Is there a way that I can increase the width of the pale green so that the left/right margins of blue around the site are smaller/narrower?

  Thanks in advance.

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

• 

  brianfgermain · Member · Sep 2, 2013 at 2:14 am

  • Copy link

  I am anxiously awaiting an answer to this as well. I notice from the Misty Lake Theme site that the set dimensions are: maximum width of 619 and the right sidebar width is 220. I am looking to expand both, but really have no idea what this CSS code is.

  Not trying to jack this post from @howardpublicschool because I think their answer will be my answer as well, but I’m at
  (email visible only to moderators and staff)

• 

  brianfgermain · Member · Sep 2, 2013 at 2:15 am

  • Copy link

  Whoops…that would be

• 

  kraftbj · Staff · Sep 3, 2013 at 9:20 pm

  • Copy link

  @howardpublicschool – Sure, since you have the premium bundle which includes Custom Design, we can modify that.

  If you visit Appearance->Custom Design->CSS in your dashboard, you can adjust the side’s width by adding:

  .site {
      max-width: 80em;
  }

  The default value is 60em, so you can increase it to your liking. Since it uses the max-width property, it will still won’t exceed the edges of the browser so folks using smaller browser windows or mobile devices aren’t negatively impacted.

  @brianfgermain – The sidebar is setup to take up a percentage of the width of .site, so it’ll automatically expand as the .site max-width does.

  Please let me know if you need anything else!

• 

  howardpublicschool · Member · Sep 4, 2013 at 12:44 am

  • Copy link

  Thank you @kraftbj!
  It worked perfectly and I’m so pleased with the results.
  Cheers.

  PS. Good luck @brianfgermain