Jump to content

Keep footer aligned left

Recommended Posts

Site URL: http://www.timjobling.co.uk

Hi there, 

I'm currently using some custom CSS to centre align the main canvas on certain pages of my site, the code is as follows:

//Centre Canvas all pages
#canvas {
    display: flex;
  justify-content: center;
    align-items: center;
}

This works great, however it is also moving my footer across from the left hand of the screen, I was wondering if there was a way of excluding the footer so it remains justified to the far left hand side of the screen as I feel this gives the site a more whole screen feel. 

For an example of what I mean the footer is correct on my homepage here:

https://www.timjobling.co.uk/

But is more central on the project pages:

https://www.timjobling.co.uk/alex-may-hughes

As always any help with this would be great!

Thanks, 

Tim.

Link to comment

This sounds rather unusual, I believe this is a something with the Wexley aligning the page to the left. To do the the page margin is set to 0px on the left. The better way to center align your pages (without changing to another template) is to target the #page rather than #canvas and "fix" the margin like this:

#page {
   margin: 20px auto;
}

Hope that helps!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Yes, the page is centered with "auto" margins left and right, which means that they will be balanced and even and centered. Your previous method was fighting against this, rather than fixing it, which is why there was a few problems.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.