Width

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