LEARN BY BUILDING

CSS Basics: Make a Page Responsive

CSS controls presentation while HTML carries the content. Start with a readable single-column layout, then add space and columns when the content benefits from them. A responsive page should tolerate long words, different text sizes and small screens without hiding essential information.

STEP 1

Start with a flexible container

Save the example below as index.html and open it locally. Resize the browser from a wide window to a narrow one. The card uses a maximum width and flexible side spacing, so it fits both without a fixed desktop-sized canvas. Border-box sizing keeps padding inside the declared dimensions.

Test at approximately 320, 390 and 768 pixels wide.
Replace the heading with a longer service name.
Zoom the page and check that the contact link stays usable.

STEP 2

Make interaction states visible

The example uses a native link and a clear focus-visible outline. Use Tab to reach the link without a mouse. Hover alone cannot communicate every state because touch and keyboard users may never trigger it. Keep sufficient visual distinction between text, controls and their backgrounds.

Retain focus indicators.
Avoid conveying errors only through colour.
Let text wrap instead of clipping it into a fixed-height box.

STEP 3

Apply the rules to a real project

Use a small set of spacing and colour variables, then style actual components. Inspect the quote calculator and invoice tool for examples of forms that need more than decorative styling. Tables, validation errors and long user input all deserve a narrow-screen test.

Use Grid or Flexbox when the layout needs them.
Keep source order logical for reading and keyboard use.
Test real content instead of only short sample labels.

Complete runnable example

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive service card</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; padding: 24px 16px; background: #f3f6f0; color: #13231b; font: 1rem/1.6 system-ui; }
  main { width: min(100%, 44rem); margin: auto; padding: clamp(20px, 5vw, 48px); background: white; border-radius: 16px; overflow-wrap: anywhere; }
  h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
  a { display: inline-block; padding: 12px 18px; color: white; background: #142c21; border-radius: 8px; }
  a:focus-visible { outline: 3px solid #2965cf; outline-offset: 4px; }
</style>
<main>
  <h1>A useful service, clearly explained</h1>
  <p>Describe the result your customer needs and what the service includes.</p>
  <a href="mailto:[email protected]">Discuss the service</a>
</main>
</html>

Use AI with a clear specification

Adapt the bracketed details to your project. Ask your coding assistant to explain its changes, then run the examples and checks yourself.

Make this page responsive without hiding content or removing keyboard focus. Test long headings, text zoom and a narrow viewport. Explain the container, spacing and typography choices. Keep the implementation small.

Official reference

MDN: CSS styling basics ↗

BUILD IT WITH HOW2CODE

Need this adapted to your business?

Tell us about your workflow, existing tools and expected result. We’ll review the brief and discuss the scope with you.

Discuss this project →