Stacks are rows or panels that contain block layouts. You add a stack to your page first and then add different blocks (e.g., text block, image block) to a stack, in which way you build up your website. You can adjust the content width and spacing on a stack-per-stack basis in your Stack Specific Design Controls. 

This help guide is for when you want to have your content in a stack reach the far end of a screen. It's also for when you want to adjust the spacing (internal or external) of a stack or the spacing in between different columns. 

How to get to Stack-specific width & spacing controls in your dashboard

1. Assuming you’ve already created a stack and a block within your stack, activate the stack by clicking anywhere inside the stack. See here if you need help adding a stack and a block.
2. Now click on the colour wheel in the toolbar on the right.
3. Stack Specific Design Controls will open in a window to the left of your screen with a number of drop-down menus where you can find Width & Spacing. 

Note: This help guide is for editing your stacks using Width and Spacing design controls.  For info on editing Stack Backgrounds, Headings and Paragraphs, Buttons, Forms, and Social Media icons, head to the Stack Specific Styling help guide.

What's in Width & Spacing controls

1. Content width adjustment (Full-width stacks)
   Adjust the width of your stack to reach closer to or to the exact edge of your screen.
2. Internal column spacing (width between columns)
   Reduce the space between columns in a stack.
3. Vertical content alignment (within a stack)
   Vertically align content to the top (default setting), middle, or bottom of the stack. 
4. Gap between columns (within a stack) - Adjust the gap found in between columns in stacks
5. Other external or internal stack spacing options
6. Mobile Width & Spacing controls
   

1. Content width adjustments

Slide the Content Width slider right to widen the design of your entire stack content. There are three width options, being narrow, midway, and full-width.

For content at the narrow setting - pull the slider all the way to the left.

For content that stretches midway (this is the default) - pull the Content Width slider to the center.

To go full-width with your design, pull the Content Width slider all the way to the right, and reduce the "Internal Column Spacing" to 0. 

2. Internal Column Spacing

Slide right to increase the gap between your blocks. Slide left to reduce the gap.

Tip: Reduce Internal Column Spacing to 0 after sliding Content Width to the far right, if you want your content to go all the way to the edge of the screen.

3. Vertical Content Alignment

To adjust the vertical position of content within a block, use the drop-down menu under Vertical Content Alignment and choose top, middle, or bottom.

4. Gap between columns

To adjust the gap between columns in a stack, slide the "gap between columns" slider to the right to widen the gap. 

4. More Specific Spacing Options: controls for top & bottom spacing

Turn on the More Specific Spacing Options to adjust the vertical top and bottom spacing between stacks. (Options will open when you tick the box)

The Stack Spacing slider bar enables you to make the following adjustments:

1) Adjust the external space at the top and bottom outside the stack you are currently editing. Pull the slider right and space above and below your stack will increase, and vice versa if the bar is moved to the left. 

2) Adjust the internal space, the top and bottom areas inside the stack you are currently editing. Pull the slider right and space above and below your content blocks will increase, and vice versa if the bar is moved to the left. 

5. Mobile Width & Spacing controls

The mobile width & spacing are optimised for your mobile display by default. You also have the option to make manual edits to mobile width & spacing by moving the toggle to MOBILE in your Stack Specific Design Options Width & Spacing control menu. You'll see a preview of any changes you make next to the MOBILE controls (see image below).

How to reverse column order on mobile to show relevant content and image together?

How to show a two-column stack on mobile?

Notes

Blog and Shop: Width & Spacing controls can be applied to only normal web pages. Blog and shop pages can not go full-width at the moment. Please contact us to vote for the idea of being able to edit the content width in your blog and shop if it's important to you.