SCAgency Posted August 5, 2019 Share Posted August 5, 2019 (edited) One of the things that disappoints us about Squarespace is the inability to do 3 equal column layouts with images if you need space on the sides. Sometimes you don't want giant images and saving images with a ton of whitespace canvas is just kinda silly and looks bad on mobile. Seems every other web platform has kept up with the demands of responsive layouts. Maybe others are using this hack (or a better one), but posting this in case anyone else is struggling. So to center three images... Create a BLANK page section with MANAGE SECTIONS. Remember the name of this section for CSS in Step 4. Add your three equal size height and width images (like client / customer logos with same pixel dimensions.) Go to Custom CSS and add this code... #yoursectionname {margin-left: auto; margin-right: auto; display: block; width: 75%;}Adjust the width to wider or more narrow. Works like a charm for us. Hope this helps. Edited August 5, 2019 by SDA Initial Revision builtbylava and carrie1 1 1 Link to comment
carrie1 Posted March 16, 2020 Share Posted March 16, 2020 Thank you! This is great 🙂 Thanks for sharing Link to comment
MistyStatum Posted May 27, 2020 Share Posted May 27, 2020 Is there a way to do this without it affecting the banner image behind it? It’s making the background image the same width as well.... thanks!!! carrie1 1 Link to comment
carrie1 Posted May 28, 2020 Share Posted May 28, 2020 On 5/27/2020 at 2:52 AM, MistyStatum said: Is there a way to do this without it affecting the banner image behind it? It’s making the background image the same width as well.... thanks!!! I noticed this as well recently. @SDAgency is there a way to avoid this? Thank you for your help in advance Link to comment
Samuel Posted July 13, 2020 Share Posted July 13, 2020 Hi folks, Just wanted to follow up. This is an amazing hack! Has anyone found a way to prevent the margins from applying to the background as well? @SDAgency? Thanks! Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 On 7/14/2020 at 4:57 AM, Samuel said: Hi folks, Just wanted to follow up. This is an amazing hack! Has anyone found a way to prevent the margins from applying to the background as well? @SDAgency? Thanks! If you share link, we can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TamaraCherie Posted July 28, 2020 Share Posted July 28, 2020 Hi, has anyone found a way to keep this hack from adjusting the background image/banner? Thanks! Link to comment
jaseyv Posted November 5, 2021 Share Posted November 5, 2021 I was able to fix the background issue by adding this to the code: #yoursectionname .sqs-layout {margin-left: auto; margin-right: auto; display: block; width: 75%;} Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment