HTML Responsive

Understand the topic

Responsive pages adapt to the available space rather than assuming a fixed screen width. Include viewport metadata, allow text to wrap, constrain media, and use flexible CSS layouts. A media query changes presentation when a condition matches. Start with a readable narrow layout and introduce columns only when the content has enough room.

Worked example

<style>
.subjects { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.subjects section { border: 1px solid #64748b; padding: 1rem; }
</style>
<div class="subjects"><section><h2>HTML</h2><p>Structure</p></section><section><h2>CSS</h2><p>Presentation</p></section></div>

The grid automatically changes the number of columns. The inner min prevents its minimum track size from exceeding a very narrow container.

Practice

Write CSS that keeps images within their container without distorting them.

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

Common mistake

Do not assume a viewport tag alone makes a page responsive. Fixed widths, long strings, and oversized media can still cause overflow.

HTML documentation