Max-Width

This tool is used to contain and horizontally center content blocks within your layout. This helps in constructing your page layouts and is a core feature of Foundry, right up there with the Columns and Spacing tools.

Examples

There are no examples for the Max-Width tool. Since it is used to control the layout of other content there is not a good way to provide examples. Be sure to check out the tutorial video above to learn more about Max-Width.

Don’t let the Muggles get you down.

Max-Width provides one of the core tools in the Foundry suite. It allows us control over how much space content within it is allowed to take up within our layout.

Previously this was a function of Foundry v2's Container tool. In an effort to expand the width limiting functionality we broke it out into its own tool and gave it a more fitting name, too.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Mode

Here you'll select the way you wish to handle the application of the maximum-width limit on your Max-Width tool's content. You can chose from the following modes:

Easy Presets

This mode allows Foundry to handle everything for you. It uses preset limits for its width at each of the six responsive breakpoints. Below you'll find the max-width limits for each breakpoint:

Extra Small: Fluid (100% width)
Small: 540px
Medium: 720px
Large: 960px
Extra Large: 1140px
Extra Extra Large: 1320px

Custom

The Custom mode allows you to select an overall, uniform maximum-width for your content within the Max-Width tool. Any time the width of the content falls below the chosen value the content will enter fluid mode and match the parent container's width.

You're also give a Units selector here to allow you to choose between Pixels (px), View Width (vw), Percentage (%) or Root EM (rem).

This mode is most like that of previous versions of Foundry. If you've used Foundry v1 or v2 you'll recognize the way this mode works as it was what was used in those versions.

Advanced

The Max-Width tool's Advanced mode is a bit of a custom version of the Easy Presets mode. Here you'll be able to define the maximum-wdith values at 5 of the responsive breakpoints (the Extra Small breakpoint is always fluid, or 100% width of the parent container).

Additionally you can opt to turn each of those 5 breakpoints on, or off. When off that breakpoint will inherit then next smallest breakpoint in order that is enabled.

Outer Padding

No Padding At

The Max-Width tool adds a small amount of padding to the outside of its container to assist with cleaner formatting of your pages. Sometimes you may want to disable this feature. Here you can opt to turn this outer padding off at each of the responsive breakpoints. You can turn the padding off at one, or all, or any combination of the six that you find useful.

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.