PRACTICE DEMO · INTERACTIVE
Small screen.
Good experience.
The same content, a different layout. Compare fixed widths with flexible CSS. The problem was deliberately built for this exercise; this is not a client repair.
Fictional studio website created for this exercise. The example’s buttons are presentation text; there is no booking or contact form.
The core of the solution
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(16px, 4vw, 36px);
}
@media (max-width: 600px) {
.layout { grid-template-columns: minmax(0, 1fr); }
}
img { max-width: 100%; height: auto; }THE PROBLEMA desktop layout
A desktop layout
on a phone.
The version before the fix keeps a 900-pixel width and two fixed columns. On a narrow screen, parts of the content disappear beyond the viewport.
THE SOLUTIONThe content follows
The content follows
the available space.
The improved version uses flexible columns, scalable spacing and a 600-pixel breakpoint. Columns stack on mobile and the navigation can wrap.