How to test responsive HTML designs

Test the layout at different widths

Responsive layouts use flexible sizing and media queries to fit the available space. Check both familiar device widths and the widths between them.

1. Open the grid example or paste your own HTML.
2. On a wide screen, choose phone and select a model from its menu, or choose tablet for an 820px preview. The phone’s name and CSS viewport dimensions appear below the frame.
3. Choose desktop to fill the preview pane, or set a custom width.
4. Resize slowly across each breakpoint and watch for clipped content or horizontal scrolling.

On a phone, the preview uses the available width and device presets are hidden. These controls change the CSS viewport size; they do not emulate another browser, touch input or a device’s performance. Check the final page in the browsers and devices you support.

Starting with a saved page? See how to open an HTML file and fix missing assets. For email layouts, the email preview guide explains what a browser check can and cannot verify.

To share a still image of a layout, save the preview as a PNG. For a document with paper margins and page breaks, follow the HTML-to-PDF guide.

Set the mobile viewport

Include this in the head of a complete document:

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

Without a viewport declaration, mobile browsers may lay out a page at a wider virtual width and scale it down. This can hide the layout changes you expected at phone widths.

Check a media query

This grid switches from two columns to one at 768px. Open it and compare 768px with 769px, then replace the short text with a longer heading to check wrapping.

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .grid > div {
    padding: 24px;
    background: #e8f0fe;
  }
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>
<div class="container">
  <div class="grid">
    <div>One column on a phone</div>
    <div>Two columns from 769px up</div>
  </div>
</div>

What to look for

• Overflow: a fixed width: 800px can exceed a small screen. Try width: 100%; max-width: 800px and account for padding.
• Long content: test URLs, headings, translated text and unbroken strings.
• Touch controls: leave enough space between buttons and check them on a touch screen.
• Breakpoint gaps: test just above and below each media query, not only the device presets.