Split Stack
One fixed, & one fluid column
Description
Two column stack, split into one fixed size column and one fluid column. Control what happens to the layout at different screen sizes.
Similar to the default float stack that ships with the stacks plugin, but Split has a fixed size column in pixels, so it's more predictable when screen sizes change.
You decide when the two columns should react to ever decreasing screen size. When the columns react, you decide what happens. Should the left column go over the right, or under the right, or just be completely hidden on small screens.
After the columns have reacted to a smaller screen, you decide how the text lays out. Should it continue to lay out exactly the same way, or should it all now be centralised.
A clean fresh intuitive user interface, and a stack that we wished we'd had to hand on many occasions in the past.
Demo
Rezize browser to see responive action.
This image will move over the text on smaller screens.
This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will move over the right, and all this text will be re-aligned to the centre, for better vertical presentation.
This image will duck under the text on smaller screens.
This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will move under the right, and all this text will be re-aligned to the centre, for better vertical presentation.
This image will be hidden on smaller screens.
This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will be hidden, and all this text will be re-aligned to the centre, for better vertical presentation.
Choose to fix the width of the right column.
This image will move over the text on smaller screens.
This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the right column will move over the left, and all this text will be re-aligned to the centre, for better vertical presentation.
User Settings
A comprehensive overview of this stacks user settings.
Choose the column to fix the width of. Left or Right.
You decide how wide in pixels the fixed left column is at each of the device sizes.
You choose the device screen size that you'd like the fixed width column to responsively react.
You choose what happens when the Split reacts. Choices are:
- Left column moves over the top of the right.
- Left column moves underneath the right.
- Left column is removed from the page.
After the responsive reaction, you choose if you'd like to centralise all text within the columns or not.
Control the spacing between each column both horizontally and vertically.
Here you can override the sizes that we have declared as the screen widths belonging to each device. It's at these screen widths that the columns respond and change.
Last modified %(last_mod)%