Banner Image Won't Resize for Mobile View in Squarespace 7.1? Here's How to Fix It
If your banner image is looking exactly right on desktop but breaking or overflowing on mobile, we recently did some work on that. This is a known problem with Squarespace 7.1, specifically if you're using background images, custom code, or image blocks inside of sections. Let’s look at why and how to fix it, with some simple steps and custom code if necessary.
What’s the Issue?
When viewed on a mobile device, a banner image can:
Look zoomed in or cropped
Word wrapping beyond the width of the screen
Not scale proportionally
Completely not shown in some designs
Why It Happens
Squarespace 7.1 theme is using responsive design, but how the banner appears depends on;
If an image is the background or an image block
The section height settings
The aspect ratio of the image
Custom CSS, Style conflict
Solution 1: Use Built-In Mobile Optimization
Edit the banner section
Click on the pencil icon on the section
Set Section Height to Small, Medium, or Auto
Auto works best for mobile
Try the Mobile Image Focal Point feature if available
Try to include an image that is high quality and not too tall or wide (the optimum ratio is ~16:9).
Solution 2: Add Responsive Custom CSS
If the banner is still misbehaving, use this CSS to make sure the image resizes correctly:
/* Ensures banner background images scale properly */
@media screen and (max-width:767px) {
section[data-section-id="YOUR SECTION ID"].page-section{
min-height: unset !important;
height: 70vh;
}
section[data-section-id="123456"] .section-background img{
object-fit: fill; //You can cover and contain if you want.
}
}
How to Add It
Go to Pages → Custom Code → Custom CSS
Find the banner section ID and use the banner section ID if you copied it in place of the section ID above.
Click Save
Test on Real Devices
After applying changes, make sure to check:
iPhone and Android screen sizes
In both portrait and landscape
With different image sizes
Also, test in an incognito browser or clear the cache to see true results.
Final Thoughts
A banner image that won’t resize on mobile is frustrating, but with:
Smart section settings
Proper image dimensions
A little CSS magic
You'll have a perfectly responsive banner on any screen.
Need help adjusting this for a specific image block or layout? Just send me your current section setup or image placement, and I’ll tailor the fix for you!
Frequently Asked Questions
-
Squarespace is known for sometimes cropping or zooming in on background images to fill space on smaller screens. That's because the scaling value and the section height value aren't in their mobile versions yet—first implementations were not looking good.
-
With the Section Height option set to Auto or mobile-only targeted custom CSS. This way, the image will be responsive and won't break out of the mobile viewport.
-
Use the 16:9 aspect ratio with dimensions of about 1500 x 844. Large and Tall images are not recommended as they disrupt the layout consistency on mobile.
-
Yes. Use a media query in Pages → Custom Code → Custom CSS to select the specific section IDs and give them a height that is more acceptable on mobile (e.g., height: 50vh).
-
Just right-click your section area, click Inspect, and find the section tag with data-section-id. Copy that ID and write it down in your custom CSS rule.
