Total control of your contents max width.
Designed to give you fine grain control over the maximum width any piece of stacks content can ever be based on the current users screen size.
Not only can Max responsively control the max width of your content at different screen widths, but it can realign the content differently at different screen widths if you wish.
So you are in the process of laying out some new page content, and you hit a point where you think "I need to be able to restrict the width of this chunk", but applying margins or padding to the left and right of the chunk is not the answer, as on smaller screens you don't want to see this extra space you applied with padding for example.
Max width is the answer, and Max is the very best at working with responsive max widths. Now on a desktop you can specify that your chunk of content be no wider than, a specific number of pixels, and when the screen gets smaller you can change that value to a different size, or just allow your chunk to now fill the entire space it is located.
When doing this, you often find it helpful to be able to realign the chunk inside it's parent container, and with Max you can do just that. You can set the alignment at the same time you set the max width.
In the demos below:
The image and the text below would normally fill the entire width of this container due to their size. Max stack is restraining them to our desired maximum width.
Constrained Text
Both this text, and the image above would occupy the entire width of their parent container (shown in sloped lines) were it not for being constrained inside the Max stack.
Max is able to align its contents left right or centre on each different device screen size.
Here Max will realign its contents to the centre on mobile devices, while presenting left on larger screens.
Try re-sizing the browser window to see Max realign the contents based on its current settings.
A comprehensive overview of this stacks user settings.
The options here are :
For each device size there is an option to provide a maximum width the contents of Max can ever be.
For each device size there is an option to align Max within its parent container, should Max not be as wide as the parent container.
This size defaults to an iPad. You may change this as required. It is at this size that the max width and alignment you specified for this device type take effect.
This size defaults to an iPhone. You may change this as required. It is at this size that the max width and alignment you specified for this device type take effect.
Last modified %(last_mod)%