Responsive Web Design: Build Around Content, Zoom and Available Space

What makes a page responsive?

Start with a simple narrow layout and let the content guide when additional columns become useful. Device names alone do not tell you how much space a long heading or translated paragraph needs.

Establish a flexible foundation

Include the viewport meta element in the HTML document, then use a container that can shrink with the viewport. Give images a maximum width that prevents them from forcing the page wider than its container.

.container {
  width: min(100% - 2rem, 66rem);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 45rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

The example begins with one column and uses two only when the viewport reaches the chosen breakpoint. The 45rem value is illustrative; choose a breakpoint by checking when your real content has enough room.

Let text influence the design

Test long titles, translated labels and paragraphs with different lengths. Fixed heights can clip text when it wraps or when the user increases text size. Prefer content-driven heights for ordinary article sections and cards.

For Arabic content, check right-to-left direction and mixed-language terms. A layout that works in English may need attention to logical spacing and reading order rather than simply mirroring every visual detail.

Make a small test matrix

Wide data tables or code can need local horizontal scrolling. That is different from allowing the entire page to overflow because one component has an inflexible width.

Avoid visual rearrangement that changes meaning

If the document order is introduction, example and conclusion, a grid should not visually present the conclusion as though it comes first. Keyboard and assistive-technology reading may still follow the document order.

Keep the underlying HTML coherent and use layout to support it. A visually impressive arrangement can still be confusing if its reading sequence is inconsistent.

Use a practical completion test

Take an article with a navigation area, a heading, a table and two related links. Test it at narrow and wide widths, then enlarge the text. Record any clipped words, hidden focus indicators or awkward wrapping.

Fix the content that breaks before adding more breakpoints. Gammal Tech's HTML and CSS courses provide relevant subjects for this work; use the project exercises to practise the checks on pages you build yourself.