Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adjust outer padding and site height with custom CSS


MissChi

Question

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!

Capture2.thumb.PNG.51da00660a8e06e2627af5e452cc2c37.PNG

 

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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;
}

 

Link to post
  • 0

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.

478540002_ScreenShot2020-12-21at10_09_23PM.thumb.png.957e06127b77bec580554dd29a4edfe1.png

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

1286636082_ScreenShot2020-12-21at10_10_49PM.thumb.png.4a639f7df81e20558f4bb790993ee067.png

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

Thanks!

Link to post
  • 0

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. 

image.thumb.png.b1db28e87195840dd4fcb79b8a05effb.png

Link to post
  • 0
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. 

image.thumb.png.b1db28e87195840dd4fcb79b8a05effb.png

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:

 

1217630049_13inchmonitornotes.thumb.png.e35216f33ca1f4c1cb468258975206b5.png.7196ce2f5cf52ecf7398aef5a726d455.png

 

2010078875_24inchmonitornotes.thumb.png.4b0e254c266c67c5737a25c34317b9d7.png.bec60b478c36f1144093b5b8e7198be5.png

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

Link to post
  • 0

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 😃

Link to post
  • 0
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. 😊

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...