Change content blocks on your site to be larger or smaller.

Resize blocks anytime to change layouts and display content in new ways. How you resize blocks depends on the editor, and different blocks may have different resizing behavior. This guide reviews a few ways to resize blocks.

The examples in this guide use a layout page, but you can add and resize blocks in many different areas of your site. For help rearranging blocks in a content area, visit Moving blocks to customize layouts.

Watch a video  

Resize blocks in Fluid Engine

Fluid Engine is Squarespace's latest editing experience. It's supported on version 7.1 sites wherever you can add block sections. If an Add Block button appears in the top-left corner when you're editing, that section uses Fluid Engine.

In Fluid Engine, resize blocks directly on the page by clicking and dragging:

1. Click Edit on the page.
2. Click the block you want to resize. To resize multiple blocks at the same time, click and drag in the section background to highlight all of the blocks you want to resize.
3. Hover over one of the squares in a block's outline until the cursor becomes an arrow, then click and drag to increase or decrease the block's width, height, or both. Hold ⌘ or Ctrl while dragging to resize the block symmetrically. A grid appears in the background to help guide your resizing.
4. Click the Mobile View icon to resize blocks on the mobile layout. Resizing blocks in the computer view won't resize blocks in the mobile layout.
5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Keep in mind, resizing may vary between different types of blocks. For example, you can change the width of a form block, but the only way to change its height is to add or remove fields.

Note: The Page Width (Max) style tweak can affect your ability to resize blocks in Fluid Engine. If you're unable to resize a block, try changing that value to a higher width.

Resize indicators

When resizing a block, yellow indicators appear when the block is the same height, width, or height and width as other blocks in the section. For example, if you're changing the width of an image above a button, yellow indicators appear on the top or bottom borders of both blocks when the image block width matches the button block's. When changing the height, yellow indicators appear on the left or right border when the heights match, and when the blocks are the same width and height, the indicators outline the whole block.

Resize blocks in the classic editor

All sites on version 7.0, and specific places on version 7.1 sites, use our classic editor in block content areas. In the classic editor, when two or more blocks are placed next to each other, they resize relative to each other. You can use this to resize blocks.

In particular, spacer blocks create empty space and can be resized to make surrounding blocks larger or smaller. For example, to center a block in the content area, add a spacer block on either side, then adjust each spacer block to an equal size.

Tip: Black guidelines appear when clicking and dragging blocks. If the guideline only spans the height of the block you're resizing, the spacer block will only resize this block. If the guideline spans the full height of the content area, it creates a new column.

To resize with blocks:

1. Click an insert point.
2. Select Spacer or another block from the block menu.
3. Click and drag the new block next to the block you want to resize.

4. Hover between the two blocks until your cursor becomes a column resizer, then click and drag to adjust their sizes. This resizes the surrounding blocks and creates more blank space in the content area.

Tip: To create more advanced layouts, see our guides on moving blocks and creating columns and rows.

Cropping handles in the classic editor

In the classic editor, you can change the height of certain blocks with a cropping handle so the content can resize without distortion. The cropping handle is available in these blocks:

• Carousel gallery blocks
• Inline and poster image blocks
• Map blocks
• SoundCloud blocks
• Spacer blocks

To use the cropping handle, click the block, then click and drag the circle that appears at the bottom of the block.

Tips for using the cropping handle blocks:

• Press and hold Shift while dragging the cropping handle to resize the image in 20-pixel increments. This can help align the bottom of the image with another block.
• In image blocks, the cropping handle only appears after you add an image.
• Double click the cropping handle to undo cropping.
• Pull the handle down to zoom in on the block.
• Click and drag the cropping handle down to crop horizontally. For image blocks, this zooms in on the image, cutting out the sides.