Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Squarespace guide
responsive design
Fluid Engine
Tags Synced
Tags Synced
AI summary
Learn to resize blocks in Squarespace using the Fluid Engine for dynamic adjustments or the classic editor for precise control. Always check mobile view to ensure compatibility across devices.
Last edited by
Platform
Category
Topic
How to Resize Blocks in Squarespace
Excerpt: Learn how to resize blocks in Squarespace for a polished, responsive website design.
Tags: Squarespace guide, website design, Fluid Engine, classic editor, responsive design, content layout
TL;DR: Key Points
- Learn to resize blocks in both Squarespace Fluid Engine and classic editor
- Use Fluid Engine for dynamic, page-specific adjustments
- Classic editor allows relative resizing with spacer blocks and cropping handles
- Check mobile view after resizing to ensure cross-device compatibility
- Use yellow indicators and cropping handles for precision
Understanding Block Resizing in Squarespace
Learning to resize blocks properly in Squarespace will make your website look more professional and work better across devices. Whether you're using the Fluid Engine or the classic editor, each has different tools for customising your layout.
Fluid Engine: Dynamic and Direct
The Fluid Engine is Squarespace's current interface for moving blocks around, available on most 7.1 sites. Here's how to resize blocks using the Fluid Engine:
- Click 'Edit' on the page you want to change
- Select the block you want to resize. For multiple blocks, drag across the section background to highlight them
- Hover over a block's outline until the cursor changes to an arrow, then drag to adjust the size
- Hold the ⌘ or Ctrl key while dragging for symmetrical resizing
- Click the mobile view icon and adjust as needed (this is crucial)
- Save your changes by clicking 'Save' or 'Exit' then 'Save' again
Pixelhaze Tip: Watch for the grid that appears when you're adjusting blocks. It helps keep everything aligned and proportional.
Classic Editor: Precise Control
The classic editor works differently. It's still used in Blog and Events sections (which run on the 7.0 engine), and focuses on spacing between blocks rather than direct resizing:
- Add a block by clicking an insert point and choosing from the block menu
- Place a Spacer block next to the block you want to resize
- Drag the cursor between blocks to adjust spacing
- Use cropping handles on image blocks and galleries for height adjustments without distorting content
The classic editor is about relationships between blocks rather than absolute positioning.
Common Questions
Can I resize blocks differently in the classic editor compared to the Fluid Engine?
Yes, they work completely differently. Fluid Engine lets you drag blocks directly to resize them. The classic editor adjusts space between blocks using spacers and handles.
How can I make sure my blocks look right on mobile after resizing?
Always check mobile view whilst you're editing. Click the mobile preview icon and adjust your layout specifically for smaller screens.
Do all block types support resizing?
No. Some blocks only let you change width, others have fixed heights. Form blocks, for example, only get taller when you add more fields.
Quick Reference
Fluid Engine: Squarespace's current editor that lets you drag and resize blocks directly on the page
Classic Editor: The older editor system still used in Blog and Events sections, focused on spacing and structural control
Spacer Block: A utility block for creating space around other blocks in the classic editor
Cropping Handle: Controls that let you adjust the height of certain blocks without distorting the content
Wrap-up
Getting good at resizing blocks in Squarespace isn't just about making things fit. It's about creating layouts that look professional and work well on every device. Whether you're using the direct approach of the Fluid Engine or the precise spacing controls of the classic editor, understanding these tools will make managing your website much easier.
The key is always checking how your changes look on mobile. Most of your visitors will see your site on their phones, so make sure it works there too.