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
  • Squarespace 7.1 Code
  • Squarespace 7 (Brine family of templates) Code
• Step 2 - Change Section ID to Work With Your Section
  • Squarespace 7.1
  • Squarespace 7 (Brine family of templates) - Index Page Section
  • Squarespace 7 (Brine family of templates) - Normal Page
• Video Instructions Coming Soon

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 (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 (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.

---

Video Instructions Coming Soon