Sizing in Cosmic

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.
Note: These features require your site to be using UO Core/Cosmic version 22.02 or newer.

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.

Class Name Example
max-w25
Max width 25%
max-w50
Max width 50%
max-w75
Max width 75%
max-w100
Max width 100%
max-wauto
Max width 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.

Class Name Example
max-h25
Max height 25%
max-h50
Max height 50%
max-h75
Max height 75%
max-h100
Max height 100%
max-hauto
Max height auto

Widths

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

Class Name Example
w25
Width 25%
w50
Width 50%
w75
Width 75%
w100
Width 100%
wauto
Width 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.

Class Name Example
h25
Height 25%
h50
Height 50%
h75
Height 75%
h100
Height 100%
hauto
Height 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. NOTE: This example page is not full-width, so the larger content blocks will not be at full width on this page.

max-w--content

Content limited to 780px wide. Any content within this region (photos, text0, etc.) will not stretch outside the 780px container.

max-w--photos

Content limited to 1200px wide. Any content within this region (photos, text0, etc.) will not stretch outside the 1200px container.

max-w--wide

Content limited to 1400px wide. Any content within this region (photos, text0, etc.) will not stretch outside the 1400px container.