You can change the content width and spacing of each stack (a row or section on your page) on its own. This guide covers making a stack full-width, changing the padding at the top and bottom, and adjusting the gap between columns. By the end you'll know where each control is and what a new stack starts with.
Where to find width, padding and gap settings for a section
Step 1: Select your stack
Click anywhere inside the stack you want to change. If you haven't added one yet, see how to add a stack and a block.
Step 2: Open the stack design controls
Click the edit pencil in the toolbar at the top of the stack. The Stack Specific Design Controls open on the left of your screen.
Step 3: Open Width & Spacing
Click the Width & Spacing dropdown. All the controls below live here.
Note: For backgrounds, headings, paragraphs, buttons, forms and social icons, see the Stack Specific Styling guide.
What a new blank stack starts with
When you add a new blank stack, it already has some spacing set so your content doesn't sit hard against the edges. These are the starting values:
| Setting | Starting value |
|---|---|
| Content Width | Mid (the middle of the slider) |
| Internal top and bottom spacing (padding inside the stack) | 32px |
| Internal Column Spacing | 0px |
You can change any of these straight away using the controls below.
Change the content width
The Content Width slider controls how far your stack's content stretches across the screen. There are three positions:
- Narrow: slider all the way to the left.
- Mid: slider in the centre. This is where a new blank stack starts.
- Full-width: slider all the way to the right.
To take your content right to the edge of the screen, move Content Width to the far right and set Internal Column Spacing to 0.
Change Internal Column Spacing
Move the Internal Column Spacing slider right to increase the space between your blocks, or left to reduce it. A new blank stack starts at 0px.
Change the gap between columns
Move the Gap between columns slider right to widen the gap between the columns in your stack.
Change vertical content alignment
Use the Vertical Content Alignment dropdown to line up content at the top, middle or bottom of the stack. Top is the default.
Change top and bottom spacing (padding)
Tick More Specific Spacing Options to open the top and bottom spacing controls. The Stack Spacing sliders let you adjust:
- External spacing: the space above and below the outside of the stack, between it and the stacks around it.
- Internal spacing: the space inside the stack, above and below your content blocks. A new blank stack starts at 32px.
Move a slider right to add space, or left to reduce it.
Use a slider or type an exact value
Spacing sliders move in steps of your site's spacing increment (for example 8px at a time). If you need a precise number, type it into the field instead. Typed values are kept exactly, so 13px stays 13px. See Spacing increments to change the step size.
Change width and spacing on mobile
Mobile width and spacing are set automatically to suit smaller screens. To adjust them yourself, move the toggle to MOBILE in the Width & Spacing panel. A preview of your changes shows beside the controls.
Tips and things to watch out for
- Full-width needs two changes: Content Width at the far right and Internal Column Spacing at 0.
- A new blank stack already has 32px of padding at the top and bottom. Set internal spacing to 0 if you want content to touch the edges of the stack.
- Width & Spacing controls work on normal web pages only. Blog and shop pages can't go full-width at the moment. If that's important to you, let us know so we can count your vote.
Frequently asked questions
Why does my new blank stack already have spacing? New blank stacks start with 32px of padding at the top and bottom so your content has room to breathe. They also start at mid content width with 0px Internal Column Spacing. You can change any of these in Width & Spacing.
Can I type an exact spacing value? Yes. Type the number into the field next to the slider and it's kept exactly, even if it isn't a multiple of your spacing increment. The sliders move in steps of your increment.
How do I make my stack go all the way to the edge of the screen? Move Content Width to the far right and set Internal Column Spacing to 0. If there's still a gap at the top and bottom, reduce the internal spacing too.
Is a stack the same as a section or row? Yes. A stack is a row or section on your page, and you add blocks (text, images, buttons) inside it.
Why can't I make my blog or shop page full-width? Width & Spacing controls only work on normal web pages at the moment. Blog and shop pages keep their standard width.
Need more help?
If you're still stuck, flick us a message at support@rocketspark.com. We're happy to help.