CSS changes to adjust outer page margins – Misty Lake

  • Author
  • #1415898

    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 howardpublicschool.com.


    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 redacted)


    Whoops…that would be



    @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!


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

    PS. Good luck @brianfgermain

The topic ‘CSS changes to adjust outer page margins – Misty Lake’ is closed to new replies.