Please note: block width adjustments is currently in beta. Please reach out to support@rocketspark.com if you would like early access
A block usually fills whatever column it sits in. But you can also drag a block narrower on its own, without touching the column it lives in or the blocks around it.
That opens up a lot. A wide heading above a narrower paragraph, a button nudged into exactly the right spot, an image offset against the text beside it. All within a single stack, and all holding up on mobile.
Before you start
You'll need design mode switched on, which is the small Rocketspark icon in the editor toolbar. If you haven't met design mode yet, start with how to edit blocks with design mode on and off.
Changing the width
- Log in to your dashboard and open the editor.
- Switch design mode on.
- Click the block you'd like to resize. A blue outline appears around it and the block toolbar floats above.
- You'll see a handle on the left and right edge of the block. Each handle is a full-height strip, so you can click and drag anywhere along that line. You don't need to aim for the little square.
- Drag inwards to narrow the block. A shaded area shows the space you've freed up, growing as you drag.
- Let go when you're happy. Your change saves on its own. The blue outline shrinks along with the content, so you can always see exactly how wide your block actually is.
Tip: that shaded area is more useful than it looks. It shows you the block's full available width while you drag, so you can see how far you've come and line the edge up with something else on the page.
Switching which side you're pulling from
When a block is at full width you'll see handles on both sides. Once you drag one of them in, that side becomes the one you're working with and the other handle steps away.
To pull from the other side instead, drag the block back out to full width. Both handles reappear, and you can then take the other one in.
This means a block hugs one side at a time, either left or right, rather than sitting narrowed in the middle. It's down to the way columns are built, and it's something we're opening up further in the freeform work that's coming.
Widths move in whole one percent steps, and there's a minimum of ten percent so a block can never disappear on you.
How it looks on mobile
Every block goes back to full width on mobile. A block you've narrowed on desktop will fill the width of the screen on a phone, which is almost always what you want, since a narrowed block on an already narrow screen leaves your content squeezed.
If you'd like a picture to be smaller on mobile as well, resize the picture itself inside the picture block rather than using the width handle. That change carries across to mobile. Learn more on how to edit the size of a picture block
More hands-on control over mobile layouts is on its way as part of the wider design work we're building, so keep an eye out.
Common questions
I can't see any handles on the edges of my block.
Three things to check. Design mode needs to be on, the block needs to be selected with a click rather than just hovered, and the block needs to be one of the types listed above. Handles are also hidden while a block is open for editing, and they come back as soon as you close it.
Can I narrow a block from both sides at once?
Not on a standard stack just yet, because of the way columns are structured. Pulling from one side is the way to go for now, and pulling from both sides is part of what's coming with freeform stacks.
What's the shaded area with the diagonal lines?
That's showing you the space your block used to take up. It appears when you hover over a block that's already been resized while it's selected. Clicking on it deselects the block. If you also have spacing above the block, you may notice the two shaded areas don't quite line up their patterns. That's a cosmetic thing we're tidying up, and it doesn't affect your design.
Does the width stick after I reload?
Yes. It's saved with the block, and it comes across when you copy a block, duplicate a page, or use the block in a template.
How is this different from changing the column width?
Column width, which you adjust with the diamond handle between columns, changes the structure of the stack and moves everything in that column. Block width only affects the one block you've selected, so you can have a wide heading and a narrow paragraph sitting in the same column.
Have a play with it on a test page. Once it clicks, you'll find yourself reaching for it constantly. Any questions, our support team would love to hear from you.