Width - pressden/emma GitHub Wiki

There are a variety of width utility classes that offer more flexibility than the editor offers by default.


alignnarrow

Sets the max-width of an element to 580px.

By default, all elements have a max-width of 782px, and can be set to wide alignment (1100px) or full alignment (100%) using controls in the editor. However, on occasion a narrower max-width may be desired.


w-100

Except for full width items, most element widths are slightly less than 100% so that there's always a bit of space between things like text and the sides of the browser window. w-100 removes that extra space.

Note: elements will still be constrained by their max-width, so this does not set items to always take up the full width of the browser!

Example without w-100 - note that the box maintains a small space on the left and right sides as the browser shrinks

img/without-w-100.gif

Example with w-100 - note that the box pushes all the way to the edge of the browser window when the browser window shrinks to meet the box's max width.

img/with-w-100.gif


w-fit-content

This reduces and element's width to fit its contents. Otherwise, the element will expand to its standard max-width. Without w-fit-content, borders and background colors of an element can be awkwardly wider than the element's contents.

In the examples below, the title text has a bottom border added to its container.

Example without w-fit-content

height=200px

Example with w-fit-content

height=200px