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
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.
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
Example with w-fit-content