Previously, all content on your website was limited to a standard fixed-width (except for stack backgrounds) but with Full-width stacks, you now have an additional two content width options:
- Slightly wider fixed width
- Full window width (adjusts with the window size)
We've also released two new design controls that compliment Full-width stacks:
- Internal column spacing (width between columns)
Reduce the space between columns in a stack, a handy way to take your content right to the edge on any screen.
- Vertical content alignment (within a stack)
Vertically align content to the top (default setting,) middle, or bottom of the stack.
How to make your stack content Full-width
1. Log into your dashboard and go to the Editor, hover your mouse over the stack you want to make full width.
2. Click on the stack-specific design controls, the colour wheel.
3. In the Stack Specific Design Options controls: Click “Width & Spacing”.
4. Drag the Content Width slider to:
- adjust to the middle width which will go slightly wider than standard
- adjust to the far-right width which will make that stack content to touch the edge of your window and adjust to the size of the window fluidly
The Internal Column Spacing slider enables you to adjust the gap in between columns within a stack. It is important that you reduce the Internal Column Spacing to 0 when you want to have your stack extend to the edge of the screen.
In the Vertical Content Alignment dropdown, you can align text to the top, middle, or bottom of the stack. This is used often when you have a two-column layout and when you want to align text (in one column) to the image (in another column).