Sizing

The Cosmic theme now offers a set of class names that can be applied to provide consistent widths and heights (as well as max-widths and heights) on block elements.

Examples and Code

Select exampleMax WidthsMax HeightsWidthsHeightsContent Widths

Open Full Example

<div class="max-w25 palette-bg-uo-green">Max width 25%</div>
<div class="max-w50 palette-bg-uo-green">Max width 50%</div>
<div class="max-w75 palette-bg-uo-green">Max width 75%</div>
<div class="max-w100 palette-bg-uo-green">Max width 100%</div>
<div class="max-wauto palette-bg-uo-green">Max width auto</div>

Open Full Example

<div class="max-h25 palette-bg-uo-green">Max height 25%</div>
<div class="max-h50 palette-bg-uo-green">Max height 50%</div>
<div class="max-h75 palette-bg-uo-green">Max height 75%</div>
<div class="max-h100 palette-bg-uo-green">Max height 100%</div>
<div class="max-hauto palette-bg-uo-green">Max height auto</div>

Open Full Example

<div class="w25 palette-bg-uo-green">Width 25%</div>
<div class="w50 palette-bg-uo-green">Width 50%</div>
<div class="w75 palette-bg-uo-green">Width 75%</div>
<div class="w100 palette-bg-uo-green">Width 100%</div>
<div class="wauto palette-bg-uo-green">Width auto</div>

Open Full Example

<div class="h25 palette-bg-uo-green">Height 25%</div>
<div class="h50 palette-bg-uo-green">Height 50%</div>
<div class="h75 palette-bg-uo-green">Height 75%</div>
<div class="h100 palette-bg-uo-green">Height 100%</div>
<div class="hauto palette-bg-uo-green">Height auto</div>

Open Full Example

<div class="max-w--content palette-bg-uo-green">Content Width</div>
<div class="max-w--photos palette-bg-uo-green">Photos Width</div>
<div class="max-w--wide palette-bg-uo-green">Wide Width</div>

Usage

Max Widths

If you need to set a max width of a block element (or override it to be auto), these classes can be used.

Max width options provide a percent width and have the following options.

• max-w25
• max-w50
• max-w75
• max-w100
• max-wauto (Sets max-width to “auto”)

Max Heights

If you need to set a max height of a block element (or override it to be auto), these classes can be used. Note, for the height value to take effect, the element and its parent must have an explicitly defined height.

• max-h25
• max-h50
• max-h75
• max-h100
• max-hauto (Sets max-height to “auto”)

Widths

If you need to set a width of a block element (or override it to be auto), these classes can be used.

• w25
• w50
• w75
• w100
• wauto (Sets width to “auto”)

Heights

If you need to set a height of a block element (or override it to be auto), these classes can be used. Note, for the height value to take effect, the element and its parent must have an explicitly defined height.

• h25
• h50
• h75
• h100
• hauto (Sets height to “auto”)

Content Block Widths

Sometimes you will want to define a block of content (such as in an envelope), with a max width and centered in its frame. These classes should be used to create that effect. Formerly, many sites used the “longform-layout—wide” (and related) classes for this function, however, those classes include extra margins and padding to work inside longform articles. These classes should be used instead in most cases as they will work better inside envelopes and on mobile pages. Longform-layout styles should still be used on longform story content.

• max-w--content
• max-w--photos
• max-w--wide