Adjust outer padding and site height with custom CSS

Site URL: https://www.anqi-wu.com

Hello, I was wondering if there is any custom css code available to adjust the outer padding and site height of my website? I am currently using the Wells template. The style editor menu allows me to adjust the outer padding but only to a max value of 80px. I was wondering if there is code available for me to adjust the padding past the 80px limit, for example 90px or 100px. As well, the style editor menu lets me adjust the site width, but no option to adjust the site height which I would also like to be able to customize. If anyone could help that would be greatly appreciated!

You need to change canvas to e.g. 100px & also move the fixed sidebar the same amount

#canvas {
    padding: 100px;
}
body.sidebar-position-left #headerWrapper {
    top: 100px;
    left: 100px;
}

Ref. fixed height, if you mean you don't want the scrolling sidebar just add this CSS:

body.sidebar-fixed.sidebar-position-left #headerWrapper {
    position: absolute;
}

Hi loueeze,

Thank you for the help! If possible, I want to find some way to keep my sidebar navigation as fixed. However, for some reason, the social icons on my website are getting cut off on my screen.

When i resize my Chrome browser to 80%, that's the only way I can get the full sidebar navigation to show (as shown below):

Is there any custom code available to size down my side-bar navigation so I can get everything to show?

Thanks!

What size screen are you using to view your site?  If you want to optimise it for whatever size you are looking from, then we could probably tweak it by removing some of the padding on top, etc. But if a customer has a smaller screen they will still see the sidebar cut off. 

Attached is how it looks on my large desktop monitor, FYI. You can see the sidebar looks great. 

23 hours ago, stressbunny said:

What size screen are you using to view your site?  If you want to optimise it for whatever size you are looking from, then we could probably tweak it by removing some of the padding on top, etc. But if a customer has a smaller screen they will still see the sidebar cut off. 

Attached is how it looks on my large desktop monitor, FYI. You can see the sidebar looks great. 

Hi stressbunny,

Thanks for your response! I viewed my website on both a 24 inch pc monitor, and on my 13 inch macbook pro monitor. When I view it on my 24 inch monitor/pc, it looks great and I can clearly see the whole layout of my website, specifically the fixed sidebar navigation and social icons. However, when I view it on my 13 inch macbook pro a good chunk of the fixed sidebar is cut off. The only way to view the full page is by zooming out the chrome browser to 80%. Attached below are samples of how it looks on the different monitor sizes:

I'm trying to figure out a way to optimize the layout so that the website can be viewed properly on both a large size monitor and a smaller size monitor like a 13 in laptop. Either adjusting the layout itself or finding a way to input a code that can auto-resize for the screen size. Open to any other suggestions you may have.

Thank you!

-Anqi

Have you asked the template creator? They might have had this question before.

You can also give this custom CSS a try. It essentially moves the sidebar up a bit. See what you think of that. 

#canvas {
    padding: 20px;
}
body.sidebar-position-left #headerWrapper {
    top: 20px;
    left: 30px;
}

I like your work btw 😃

On 12/23/2020 at 6:29 PM, stressbunny said:

Have you asked the template creator? They might have had this question before.

You can also give this custom CSS a try. It essentially moves the sidebar up a bit. See what you think of that. 

#canvas {
    padding: 20px;
}
body.sidebar-position-left #headerWrapper {
    top: 20px;
    left: 30px;
}

I like your work btw 😃

 Thanks stressbunny for the help! Will give the code a try and also see about contacting the template creator.  Thanks so much for your kind words on my work. 😊