Width
The card is as wide as the page, so on a big screen, its text runs in very long lines. Width is set by the w-* classes, and their numbers are steps of the same spacing scale: w-64 is 64 steps of 0.25rem, which is 16rem or 256 pixels. Besides numbers, there are classes for widths that depend on the parent or on the window:
| Class | CSS | Width |
|---|---|---|
w-12 | width: 3rem; | 48 px |
w-64 | width: 16rem; | 256 px |
w-96 | width: 24rem; | 384 px |
w-1/2 | width: 50%; | half of the parent |
w-full | width: 100%; | the whole parent |
w-screen | width: 100vw; | the whole window |
w-auto | width: auto; | the default |
Fractions such as w-1/2, w-1/3, w-2/3 or w-3/4 are a share of the parent's width, like percentages in the CSS course. w-full makes an element as wide as its parent's content, w-screen as wide as the browser window, and w-auto brings back the default width, which the browser works out itself.
A button is an inline-block element, as you know from the CSS course: it's only as wide as its content, but it can be given a width. Buttons as wide as the whole card are common, especially on phones: they're easy to hit with a finger.
Instructions
Add the class w-96 to the card. It becomes 384 pixels wide. Now click 375 px in the Preview width bar above the preview, which shows the page as wide as a phone's screen: the card doesn't fit and sticks out of the page. We'll fix that in the next exercise. Then switch the preview back with the Fit button.
Add the class w-full to the button. It becomes as wide as the content of the card.
Start programming for free
4/9