Stacks Image 6

Max

Constrains content max width responsively.

Max

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.

Overview.

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.

Instant download.

Version : 1.0.1

Responsive : Yes

First released : 18/7/2015

Last Updated : 5/9/2016

Stacks V 3.0 or greater.

Live demo.

You can see a live example of the stack in action below.

When you view on different screen sizes, or change the screen size by resizing this browser window now, you will see how we have set Max up in this little demo to react. Here Max will restrict the width of the image stack to different sizes as the screen width changes. Max can restrict the width of any stack in this way.

= Highlighting the parent container Max is placed.
= Highlighting the width the content would normally occupy without Max.

Stacks Image 634

Max can also realign its self within its parent container at the same time as it adjusts its own max width. This paragraph has the same max width settings as the image above, but this max stack is set to realign its self at each breakpoint.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
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.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Max needs no fancy user interface for ease of use. It could not be easier. Just treat it as a regular default content stack that ships with the Stacks plugin. Simply dragging and dropping your content inside, then specifying the max widths for each device size in the stacks settings.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

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.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589
Max Stack

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

Max Stack