How to Resize Image Blocks on Mobile in Squarespace 7.1

Jun 28

In today's mobile-first digital world, your website must look equally great on all screen sizes. A design fix that often goes overlooked? Make the Image Columns block resize as expected when in mobile, while keeping the layout intact on mobile and desktop.

This step-by-step guide shows you how to resize Image Blocks responsively on mobile in Squarespace 7.1, with clean, effective CSS — no plugins, no bloat.

What’s the Problem?

Squarespace Image Blocks can do the following out of the box:

Overflow the mobile screen
Appear too large or too small
Lose their alignment or spacing
Impact page speed and readability

Good thing this can be easily solved with some responsive CSS.

Why Resize Image Blocks for Mobile?

Here’s why: This is a must-have optimization:

Improves mobile user experience
Helps your design feel up-to-date and balanced
Provides a better-scaled image for the loading speed
Prevents getting cut-off visuals on mobile, whipping side screens
Keep your brand consistent across all devices

Whether it’s a product, portfolio, or service, images have to be available on a mobile device.

Step-by-Step: Resize Image Blocks on Mobile

Step 1: Apply Global Mobile Image Styling (All Image Blocks)

Go to Pages → Custom code → Custom CSS and paste the following code:


@media screen and (max-width: 767px) {
  .sqs-block-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
}

What This Does:

Targets screens 767px wide or smaller (standard mobile breakpoint)
Forces image width to 90% of screen (you can adjust this)
Maintains aspect ratio for clean scaling
Centers the image with automatic margins

This applies to all image blocks site-wide on mobile.

Step 2: Resize a Specific Image Only (Optional)

If you want to style one image block only (instead of all), follow these steps:

A. Add a Block ID (Example: #block-custom-mobile-image)

In the Squarespace editor:

Click the image block → Advanced → Add Custom ID
Set the ID to something like custom-mobile-image

B. Target it in CSS


@media screen and (max-width: 767px) {
  #block-custom-mobile-image img {
    width: 80% !important;
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
}

This ensures only that specific image resizes differently on mobile.

Additional Customization Options

  
        Option
        Description
      
        max-width
        Set specific limits for how large the image can get
      
        margin-left / margin-right
        Fine-tune image alignment manually
      
        padding
        Add space above/below images on mobile
      
        object-fit (for background)
        If using images inside blocks, like banners
      
        Different styles for each image
        Use unique block IDs for total control

How to Use It

Paste the provided CSS into Pages → Custom code → Custom CSS
Save and preview your site using Squarespace's mobile preview tool
Adjust values (90%, 80%, etc.) until you get the desired mobile appearance

Bonus Tip: Create Separate Mobile Versions of Images (Advanced)

For complete control, you can:

Add two image blocks (one for desktop, one for mobile)
Use CSS to show/hide based on screen size with display: none


/* Hide desktop image on mobile */
@media screen and (max-width: 767px) {
  .desktop-only { display: none; }
}
/* Hide mobile image on desktop */
@media screen and (min-width: 768px) {
  .mobile-only { display: none; }
}

This lets you use optimized image dimensions or formats per device.

Final Thoughts

Resizing Image Blocks for mobile in Squarespace is a small but crucial improvement that dramatically enhances how your site feels on phones and tablets.

By applying just a few lines of responsive CSS, you can:

Ensure image balance across all devices
Deliver faster-loading, more visually appealing layouts
Maintain your design integrity without sacrificing usability

Frequently Asked Questions (FAQ)

1. Why are my Squarespace images not resizing properly on mobile?
By default, Squarespace's built-in styles don’t always optimize image blocks for small screens. This can cause images to overflow, appear misaligned, or load at incorrect sizes. Adding responsive CSS solves this by adjusting width and alignment based on screen size.

2. Will the provided CSS affect the desktop layout?
No. The code is wrapped inside a mobile-specific media query (max-width: 767px), which ensures it only runs on smaller screens. Your desktop view will remain untouched.

3. Can I resize just one image block instead of all of them?
Yes! You can assign a unique block ID to a specific image (e.g., #block-custom-mobile-image) and target only that block with CSS. This gives you precise control over individual image behavior.

4. What does max-width: 90% mean, and can I change it?
max-width: 90% means the image won’t exceed 90% of the screen width. You can adjust this value (e.g., to 80% or 100%) to suit your layout design.

5. How can I center images on mobile?
The provided CSS uses margin: 0 auto and display: block, which are standard CSS rules to center block-level elements (like images) horizontally within their container.

6. Can I use different images for mobile and desktop?
Yes. You can add two image blocks and use CSS classes like .desktop-only and .mobile-only to show/hide them based on screen size. This allows for separate cropping or file formats optimized for each device.