---
title: "Resize a block with its handles"
description: "Use the eight handles around a selected block to resize it freely from the corners or the middle of each side."
url: https://docs.vivlab.com/en/editor/interaction/stretch
---

# Resize

When a block is selected, **eight handles** appear around it: four on the corners (top-left, top-right, bottom-left, bottom-right) and four in the middle of each side. Grab any one of them to resize the block. On a block that's very small on screen, only the corner handles remain visible.

<DocsScreenshot name="editor-text-selection" alt="Handles around the text let you resize the block." :width="410" :height="202" />

## Corner handles

Corner handles change the **width and height** of the block at the same time, keeping its proportions. Drag outward to enlarge, inward to shrink. The opposite corner stays fixed.

## Edge handles

Edge handles change a single dimension:

- **Top** or **bottom** edge: changes the height only.
- **Left** or **right** edge: changes the width only.

This is the option to choose when you want to adjust a single dimension without touching the other.

A [Text](https://docs.vivlab.com/en/editor/menu/text.md) or [Button](https://docs.vivlab.com/en/editor/menu/button.md) block can't get smaller than the text it contains: its height automatically readjusts to the content.

## Multiple selection

If several blocks are selected, the resize applies to the **bounding rectangle** of the selection. Every block is scaled proportionally to that rectangle.

## Alignment and grid

While you resize, the [guides and alignment](https://docs.vivlab.com/en/editor/interaction/canvas-grid.md) appear to help you snap the block to the grid or to other elements in the section. The final size is automatically rounded to the grid.

## Locked block

A **locked** block from the [action bar](https://docs.vivlab.com/en/editor/interaction/block-action.md) cannot be resized. Click **Unlock** to take control again.