Project Three: A Coffee Menu

// August 5, 2026 • 2 min read

Welcome back, nobody! Today's job was getting project three onto the site: a little coffee menu page, complete with a picture that was determined to escape its box.

Heads up, this one doesn't match the rest of the site's colour scheme — and that's fine, not every project needs to match, sometimes it's just nice to build the thing.

The drama started when I tried to get the coffee picture to sit neatly inside the menu board at 90% height. Reasonable request, I thought. The browser disagreed and let the image spill out like it owned the place. Turns out percentage heights only work if the parent box has an actual height to measure against — mine didn't, it was just doing its own auto thing. Gave it a proper height, and for a second thought that was it... except I'd used min-height instead of height, which apparently doesn't count for percentage maths either. Classic Callum. Swapped it over, gave the image a fixed width too so it stopped stretching itself out of proportion, and it finally sat where it was supposed to.

Once that was sorted, I turned it into a phone problem instead — because of course a 250px fixed-width image looks ridiculous crammed next to a menu list on a small screen. Sorted that with a media query: under 600px wide, the image drops the float, goes full width, and stacks above the list instead of fighting it for space. Desktop layout stays untouched, phones get their own sensible version.

Ended the day with a coffee menu that actually behaves itself, on desktop and mobile. Small project, but a proper reminder of how fussy CSS percentages and floats can be.

Key Features

• A coffee menu page with an image contained properly inside its board using explicit height and width
• object-fit: cover to stop the image distorting once it's boxed in
• A mobile breakpoint at 600px that switches the image to full-width and stacked, instead of squeezed in beside the menu