Demo layout fix — the Before version is intentionally broken, to show the problem. The After version is the fix.
Layout fix: before and after
The same cards, shown first the broken way, then the fixed way. Use the toggle below. The phone frame is 360px wide, a common phone width. This demo now covers five bugs, not three.
Bug 1: Fixed 900px container
Before: content is 900px wide, so a phone has to scroll sideways. After: content fits the phone width.
Bug 2: Titles that do not wrap
Before: long titles use nowrap, so they get cut off. After: titles wrap to two lines, fully readable.
Bug 3: Row that never stacks
Before: three cards stay in one row and get squeezed off screen. After: cards stack in one column on a phone.
Bug 4: Buttons too small to tap
Before: buttons are 10px text with tiny padding, hard to tap on a phone. After: buttons are large, with clear padding.
Bug 5: Stretched image box
Before: an image box is forced to a fixed height, so it looks stretched. After: the box keeps its shape, with the image cropped cleanly from the top.
Checked after the fix
Phone width: no sideways scroll. Titles: fully readable. Buttons: large enough to tap. Image: shape kept.
After: everything fits, no sideways scroll, titles fully readable.
Our services and products for every customer today
Fresh bread every single morning for the whole neighbourhood
Baked daily, simple prices, message to order.
Chocolate cake slice
Rich chocolate, soft sponge.
Chicken patties
Golden pastry, savoury filling.
What was changed, in plain terms
- Fixed 900px width → full width, with a max width for large screens.
- nowrap titles → normal wrapping, so long titles show in full.
- Single row → one column on phones, three columns only on large screens.
- Tiny buttons → large, tappable buttons.
- Stretched image box → box that keeps its shape.
- Checked at phone width: no horizontal scroll on the fixed version.
Back to portfolio · Demo by Musabbir Rahman