How to Resize Blocks in Squarespace
TL;DR:
- Fluid Engine lets you resize blocks by dragging edges directly on your page
- Classic Editor uses spacer blocks and cropping handles for size adjustments
- Yellow indicators help you match block sizes for consistent layouts
- Different block types behave differently when resized
- Always check your mobile layout after making changes
Squarespace gives you two ways to resize blocks depending on which version you're using. Version 7.1 sites use the Fluid Engine, while older 7.0 sites rely on the Classic Editor. Each method has its own approach.
Resizing with the Fluid Engine (Version 7.1)
The Fluid Engine makes resizing blocks straightforward. You can drag and drop elements directly on your page without switching between different editing modes.
Getting started:
- Click 'Edit' on your page
- Click the block you want to resize
- To select multiple blocks, drag across the section
Resizing blocks:
- Hover over a block edge until you see an arrow cursor
- Drag to resize the block
- Hold ⌘ (Mac) or Ctrl (PC) while dragging for symmetrical adjustments
- Watch for yellow guidelines that appear when your block matches the size of nearby blocks
Mobile considerations:
Switch to Mobile View to check how your resized blocks look on smaller screens. Blocks that look perfect on desktop might need adjustments for mobile.
Troubleshooting:
If you can't resize a block as much as you'd like, increase your Page Width (Max) setting. This gives you more room to work with.
Working with the Classic Editor (Version 7.0)
The Classic Editor requires a different approach. You'll work with spacer blocks and specific tools to adjust sizes.
Adding and positioning blocks:
- Click an insert point where you want to add content
- Choose 'Spacer' or your desired block type from the menu
- Drag your new block next to existing content
Resizing techniques:
- Use the column resizer that appears between blocks to adjust widths
- For image blocks and galleries, look for the cropping handle at the bottom
- Hold Shift while dragging to make adjustments in 20-pixel increments
- Use the black guidelines that appear to help balance your layout
Cropping handles:
These circular controls at the bottom of certain blocks let you adjust vertical dimensions without distorting your content. Double-click a cropping handle to undo your last change.
FAQs
Can I resize multiple blocks at once in Squarespace?
In Fluid Engine, yes. Just drag to select multiple blocks and resize them together. In Classic Editor, you need to adjust each block individually or use spacer blocks to affect groups.
How do I make sure my blocks are the same size?
Look for yellow indicators while resizing. They appear when your block matches the dimensions of nearby blocks, helping you create consistent layouts.
Can I undo changes made with cropping handles?
Yes, double-click the cropping handle to revert your last adjustment.
Why can't I resize some blocks?
Some block types have restrictions on how they can be resized. Text blocks, for example, expand based on content, while image blocks maintain aspect ratios unless you use cropping handles.
Jargon Buster
Fluid Engine – The drag-and-drop editor used in Squarespace 7.1 that lets you resize blocks directly on your page
Classic Editor – The traditional layout system in Squarespace 7.0 that uses spacer blocks and specific tools for resizing
Spacer Blocks – Empty blocks used to create space between content or adjust layout dimensions in the Classic Editor
Cropping Handle – A draggable circle at the bottom of certain blocks that lets you adjust vertical size or zoom into content without stretching it
Wrap-up
Both the Fluid Engine and Classic Editor give you control over block sizing, just through different methods. The Fluid Engine offers more intuitive drag-and-drop control, while the Classic Editor provides precise adjustments through spacer blocks and cropping handles. Whichever system you're using, remember to check your mobile layout after making changes.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for in-depth tutorials and expert guidance.