Responsive HTML Testing

Steps

1. Build the layout at desktop width first.
2. Switch to tablet and mobile preview widths.
3. Adjust CSS with media queries.
4. Recheck interactive elements at each width.
5. Validate that text remains readable without horizontal page scroll.

Example

Sample — Run

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

Run the sample, then switch preview widths. Above 600px the cards use three columns; at 600px or below they stack. The media query uses the iframe viewport width. Check long words, images, keyboard focus and tap targets as well as column layout. Width simulation does not reproduce every physical device or browser.

Tip

The viewport label shows the current preview frame width so you can align tests with common breakpoints.

Related tools