Stacks Image 1012

Max Stack

Constrains content max width responsively, at different device sizes.

Instant Download
Requires Rapidweaver & Stacks Plugin v3.5 +
Stacks Image 1033

Overview

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.

Demo

Live demos of the stack in action.

Stacks Image 1296

Constrained Text

Both this text, and the image above would occupy the entire width of their parent container (shown in red) 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 left on mobile devices, while presenting centre on larger screens.

Custom Controls

A comprehensive explanation of each of the stacks custom settings.

Stacks Image 1118
Width based on

The options here are :

  • Pixels.
  • Percentage.
Pixels restricts the max width to an exact pixel size, while percentage restricts the max width to a percentage of the width of the parent container that you place the Max stack inside.

Max on (Device)

For each device size there is an option to provide a maximum width the contents of Max can ever be.

Align

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.

Tablet device

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.

Mobile device

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.

More FAQ

Other Important information relevant to this stack.

Stacks Image 1196
Stack installation
Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Known compatibility issues

There are no known compatibility issue at this time.

Browser Support
Tested in all major browsers, on desktop and mobile devices, without issue.

Explorer

Safari

Chrome

Firefox

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™