HTML Responsive
Responsive pages adapt to the space available instead of assuming one device size. HTML supplies useful structure and media choices while CSS handles most layout changes.
How it works
- Include a viewport meta element with width=device-width and initial-scale=1. Do not disable user zoom.
- Use flexible widths and responsive media rules. Images should be able to shrink within their containers without distorting their proportions.
- Test long words, zoom, narrow windows, keyboard focus, and content growth. A layout that fits a specific phone screenshot may still overflow in real use.
A practical example
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
img { max-width: 100%; height: auto; }
</style>
Use .cards on a container of articles. The columns adapt to the available width, while the min() prevents a minimum card width from overflowing a very narrow container. Put these rules in the CSS panel when previewing.