How to Keep the Full Banner Image Visible on Mobile (Squarespace 7.1)
A very common design complaint I hear from Squarespace 7.1 users is: “I like the way my banner, or hero image looks on desktop but it just isn’t looking right on mobile it’s getting cropped too much or too zoomed in.” This is because Squarespace tries to fill the screen instead of looking at the whole image.
The good news?
With some section settings and a bit of CSS you can ensure your full banner image in tact on mobile without compromising your layout.
What the Problem Looks Like
On mobile devices, you may notice:
The top or bottom of the image is cut off
The image appears zoomed in
Important text or details disappear
The banner feels too tall or unbalanced
This is especially common with section background images.
Why Banner Images Get Cropped on Mobile
In Squarespace 7.1:
Banner images default to background-size: cover
Mobile screens are taller and narrower
Sections often have fixed or tall heights
“Cover” fills the space but sacrifices parts of the image
As a result, Squarespace crops the image to maintain layout consistency.
Step 1: Check Native Section Settings (Always Start Here)
Before using any code:
Edit the page
Click the banner section
Click the pencil icon
Set Section Height to Auto (recommended for mobile)
Adjust the Image Focal Point so the most important area stays centered
Preview the mobile view
For many sites, this alone fixes the issue.
Step 2: Force the Full Banner Image on Mobile (CSS Solution)
If the image is still cropped, add this CSS.
Go to Website → Pages → Custom Code → Custom CSS and paste:
@media (max-width: 767px) {
.section-background {
background-size: contain !important;
background-repeat: no-repeat;
background-position: center;
}
.section-background img {
object-fit: contain !important;
}
}
What this does
Prevents image cropping
Keeps the full image visible
Preserves the original aspect ratio
Works for both background images and image-based banners
Target a Specific Banner Only (Best Practice)
If you only want this behavior on one banner:
Right-click the banner → Inspect
Copy the data-section-id
Use this CSS:
@media (max-width: 767px) {
section[data-section-id="YOUR-SECTION-ID"] .section-background {
background-size: contain !important;
}
section[data-section-id="YOUR-SECTION-ID"] .section-background img {
object-fit: contain !important;
}
}
This prevents unwanted changes elsewhere on your site.
Image Size & Ratio Tips (Important)
For best results:
Use 16:9 or 4:5 image ratios
Avoid extremely tall images
Upload high-resolution images (at least 1500px wide)
Keep key content centered in the image
Common Mistakes to Avoid
Using fixed section heights on mobile
Relying only on desktop preview
Forcing background-size: cover everywhere
Ignoring focal point settings
Applying global CSS without scoping
Final Thoughts
Squarespace crops banner images on mobile by default to maintain a consistent visual.
But if you use section settings in conjunction with targeted mobile CSS, you can preserve the full image where it matters most— all without sacrificing huge page sizes or layout jitters.
The trick is not to force the layout, but control it with image fit and section height.
FAQ: Full Banner Images on Mobile (Squarespace 7.1)
-
Because Squarespace uses cover by default to fill the section.
-
No. Section height and focal point settings may be enough.
-
No. The CSS is mobile-only.
-
Yes, by targeting the section ID.
-
Yes. It only changes how the image is displayed.
