Full Mobile Banner Image in Squarespace (No Cropping!)

To help your website be more mobile friendly, Squarespace automatically zooms in and crops your banner image when being viewed from a mobile device. However, depending on the content of your image, you may not like how the image is cropped.

In previous videos I have shown you how to set a different banner image on mobile. You can check out the video for Squarespace 7.0 here and the video for Squarespace 7.1 here.

In this video, I show you how to have the exact same image appear on both the desktop and mobile. Take note that in order for this strategy to work it must be done in a section that only uses an image block. You cannot have any other text or images.

All the code used in the video is provided below.

The following code is used in the video.

Squarespace 7.0

#PAGEID {
  .Index-page-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  .sqs-block-image {
    margin-top: 2vw;
    width: 100vw;
  }
}

Squarespace 7.1

#COLLECTIONID #page .page-section:nth-of-type(1) {
  .content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
 }
  .sqs-block-image {
    margin-top: -8vw; 
    width: 100vw;
  }
}

Here are some other posts you may like:

• Grid Summary Items in Two Columns on Mobile

• Style Image Caption on Hover in Squarespace 7.1

• Autoplay Carousel Summary Blocks