timjphoto Posted October 4, 2022 Posted October 4, 2022 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.
Ziggy Posted October 4, 2022 Posted October 4, 2022 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! timjphoto 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
timjphoto Posted October 4, 2022 Author Posted October 4, 2022 Hi there, thanks very much for your reply. I've popped your code in and it has centred the images nicely and the footer is back where it should be, Will it keep the content centred on larger screen sizes? Many thanks again, Tim.
Ziggy Posted October 4, 2022 Posted October 4, 2022 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. timjphoto 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
timjphoto Posted October 4, 2022 Author Posted October 4, 2022 Amazing, thanks very much for your help.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment