Need help? Check out our Support site, then

CSS changes to adjust outer page margins - Misty Lake

  1. howardpublicschool

    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

  2. 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]

  3. Whoops...that would be

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

  5. howardpublicschool

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

    PS. Good luck @brianfgermain

Topic Closed

This topic has been closed to new replies.

About this Topic