Squarespace designer UK. How do I show a full width banner on my mobile on Squarespace 7.1?

As part of our ‘Squarespace website expert series’ one subject occasionally comes up and needs fixing. On a desktop the banners will show full width but on a mobile the banner will be cropped to fit into the portrait shape. A bit of CSS code will fix that. To show a full-width banner on mobile in Squarespace 7.1, follow these steps:

1. Use a Full-Width Section:
   Ensure the banner is placed inside a Full-Width section. In Squarespace 7.1, you can add a full-width section via the page editor by clicking the "+" icon and selecting "Full-Width."

2. Add a Banner Image:
   Upload your banner image to the full-width section or use a background image for that section. Make sure the image dimensions are large enough (at least 1500px wide) to look good on all devices.

3. Optimize Image Focal Point:
   Click on the banner image, select "Edit," and adjust the image focal point to the key area you want visible on mobile screens. This ensures important parts of the banner stay visible when the image crops for smaller screens.

4. Adjust Section Padding:
   Under section settings, reduce unnecessary padding/margins to let the banner fully stretch across the mobile screen.

5. Use Custom CSS (optional):
   If the banner does not automatically extend full width on mobile devices, you can add this CSS:

   @media only screen and (max-width: 640px) {
     .sqs-block-image .sqs-image-container {
       width: 100vw !important;
       margin-left: calc(-50vw + 50%);
     }
   }
   

   This CSS forces the image container to stretch full width on mobile viewports.

6. Check on Mobile Preview:
   Always preview your page in mobile view to ensure the banner displays full width and looks balanced.

Following these steps ensures your banner spans the full width on mobile devices while maintaining image quality and composition.