Locked to the Picture

Jump to

Smallest readable 26px

880

Rooms with a long view over the water

headline is locked to this picture

Six rooms above the old chandlery, each looking straight down the estuary. Breakfast is at the long table, and the tide comes in under the window.

Selected · Heading

Locked toPicture

Left6.0%

Top58.0%

Width62.0%

Size7.20cqw

Right now

Picture is874px

Heading renders at63px

Releases below264px

Locked

When it will not fit

Drop the whole line under The heading stops being an overlay and becomes an ordinary line of text beneath the picture, full width. Chop it at the edge The first lines stay on the picture, the rest carries on below it, across the boundary.

What gets stored

Try this

Drag the picture's corner. The headline scales and holds its place with no code running. That is one CSS line, not a resize listener.

Pull the width to Phone. The heading shrinks with the picture until it hits the readable floor, then it lets go.

Raise the floor. Releasing happens sooner. That single number is the only responsive decision anyone has to make.

Nothing here is a breakpoint. The heading's position and size are percentages of the picture, so scaling is free. The only computed number is the width at which the picture gets too small for the text to stay readable, and because the percentage and the floor are both known when the site is published, that width can be written into the stylesheet as a fixed rule. The published page needs no JavaScript to behave this way.