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.