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

1. Edit the banner section

2. Click on the pencil icon on the section

3. Set Section Height to Small, Medium, or Auto

1. Auto works best for mobile

4. 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:

CSS

Copy

Copied!

/* Ensures banner background images scale properly */
@media screen and (max-width:767px) {
   section[data-section-id="68382257800eb43c7f1b29ed"].page-section{
  min-height: unset !important;
  height: 70vh;
}
  section[data-section-id="68382257800eb43c7f1b29ed"] .section-background img{
    object-fit: fill;
  }
}
  

How to Add It

1. Go to Design → Custom CSS

2. Find the banner section ID and use the banner section ID if you copied it in place of the section ID above.

3. 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!

FAQ: Fixing Banner Image Resize Issues in Squarespace 7.1

---

1. Why does my Squarespace banner image appear zoomed in on mobile?

Squarespace is known for sometimes cropping or zooming in 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.

2 . Why is the banner image overflowing in the mobile view, and how can I remove it?

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.

3. What are the best image dimensions or aspect ratios for Squarespace banners?

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.

4. Can I make my banner stack with CSS in Squarespace 7.1?

Yes. Use a media query in Design > Custom CSS to select the specific section IDs and give them a height that is more acceptable on mobile (e.g., height: 50vh).

5. How do I find out the section ID of a banner in Squarespace?

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.

6. Is changing the section height the only step to do away with all banner mobile issues?

Not always. Mix section heights, image focal points, and CSS to get a fading image effect and a combination that will work on all devices.