Media and embeds
Every image on this page has a different aspect ratio on purpose. A gallery of identically proportioned pictures behaves itself; one that mixes a panorama with a portrait is where the row heights, the object-fit and the caption alignment come apart. The label baked into each image is its ratio, so a squashed one is obvious at a glance.
A left-floated portrait image sits to the left of this paragraph. In a block theme the float would be constrained by the layout wrapper; in a classic theme there is no wrapper, so without a rule of our own the image floats against the viewport while the paragraph stays inside the column — and the text wraps around something parked hundreds of pixels away. This paragraph is long enough to run past the bottom of the image so that the point at which the wrap ends is visible, and long enough again to show whether the following block clears the float or collides with it.
And the mirror case on the right. On a 320 pixel screen a float and a readable line cannot share a row at all, which is the one place where a width media query is defensible — and if one is added it takes a threshold core already declares rather than a number of our own.
Galleries
Cover and media & text
A cover at the default width
A full-width cover with a fixed background
Cover paints its own text white and dims the image behind it. That white is one of the literals the static CSS audit flags against a white page background — and it is a false positive, because the rule that sets it also sets the dark backdrop underneath.
Media on the left, text on the right. The block collapses to a single column at a threshold core declares itself, and that threshold must not be overridden — doing so is the most common way to break a mobile layout that was working.
Media on the right, wide, vertically centred
A panorama in a media-text cell is the case that exposes whether the grid track can shrink. Without min-width: 0 on the children, the intrinsic width of the image becomes a floor the track cannot go below and the whole block pushes past the column.
Image-fill mode with a very tall image, at full width. The media cell becomes a background rather than an image, and the cell height is driven entirely by the text beside it.