Prevent Banner Images From Being Cropped in Squarespace

If you created a beautiful banner with text or people in it, but are having issues with Squarespace cropping those on mobile or tablet, here’s how to fix it and prevent Squarespace from cropping banner and background images.

This code works best if you have a banner image with no blocks over top of it. You may have to tweak the code slightly if you want to add text, images, or other blocks over top of the image within Squarespace.

Table of Contents

    Step 1 - Add in the CSS

    First, we’re going to paste the CSS we need and then we’ll tweak it to work on your site.

    Copy and paste the following CSS into DESIGN → CUSTOM CSS. Pick the one for your specific version of Squarespace.

    Squarespace 7.1 Code

    /* Prevent banner image from cropping */ /* Change the data section id to match your section */ [data-section-id="60b7f7de67f00141229c72e5"]{ min-height: unset !important; .content-wrapper{ padding-top: unset !important; /* Adjust value "55%" until your full image is in view */ padding-bottom: 55% !important; } .section-background{ padding: inherit; } .sqs-layout .sqs-row .html-block{ height: 0px; padding: 0px 0px !important; } }

    Squarespace 7 (Brine family of templates) Code

    /* Prevent banner image from cropping */ /* Change the section id "#welcome-brine" to match your section slug */ /* Stop banner image cropping */ #collection-60ba80ccf6b7f411d27b0c99, #welcome-brine { .Index-page-content, .Intro--has-image{ max-width: unset !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; min-height: unset !important; /* Adjust value "60%" until your full image is in view */ padding-bottom: 60% !important; } .sqs-grid-12 .sqs-block-spacer, .sqs-grid-12 { height: 0px; padding: 0px 0px !important; min-height: unset !important; } }

    Step 2 - Change Section ID to Work With Your Section

    Squarespace 7.1

    Right-click anywhere within the banner image and click on INSPECT ELEMENT. Scroll up until you find the closest SECTION tag and copy the numbers after “data-section-id (As shown in the below image). Replace the numbers in the “[data-section-id="60b7f7de67f00141229c72e5"]” portion of the code you copied above to your own section ID value.

    Squarespace 7.1 - Getting Section ID.jpg

    Squarespace 7 (Brine family of templates) - Index Page Section

    Right-click anywhere within the banner image and click on INSPECT ELEMENT. Scroll up until you find the closest SECTION tag and copy the text after “section id= (As shown in the below image). Replace the “#welcome-brine” portion of the code you copied above with your own section ID value.

    Squarespace 7 - Getting Section ID.jpg

    Squarespace 7 (Brine family of templates) - Normal Page

    Right-click anywhere within the banner image and click on INSPECT ELEMENT. Scroll almost all the way up until you find the “body” tag and copy the text after “id= (As shown in the below image). Replace the “#collection-60ba80ccf6b7f411d27b0c99” portion of the code you copied above with your own collection ID value.

    Squarespace 7 - Getting Collection ID.jpg

    Video Instructions Coming Soon

    Vigasan

    Hey! I’m Vigasan and I love the Internet. I have a Bachelor of Science in Computing Systems with a double specialization in Computer Science and Software Engineering. I’ve been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

    https://www.adlyticmarketing.com/
    Previous
    Previous

    Remove Menu Underlines and Change Color Instead on Squarespace 7.1

    Next
    Next

    Floating Social Media Icons on Squarespace