Introduction to Responsive Design

Responsive design makes content readable and usable across different widths, input methods, and viewing conditions—not merely on named devices.

A responsive interface adapts its layout, typography, imagery and controls to available space. Start with content that works in a narrow container, avoid unnecessary fixed widths, and enhance the layout as space increases.

Test whether text wraps, buttons remain reachable, images stay inside their containers, and nothing requires unintentional horizontal page scrolling.

A fixed 560px card does not fit a 300px container. A card with width:100% and max-width can grow when there is space but shrink when space is limited.

An inflexible width can overflow narrow screens.

HTML

<article class="resp-card"><h3>Weekend guide</h3><p>Find ideas for your next trip.</p></article>

CSS

.resp-card { width: 560px; box-sizing: border-box; padding: 18px; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 10px; } .resp-card h3 { margin: 0 0 8px; } .resp-card p { margin: 0; }

Rendered output

Observe: The 560px card can overflow the demonstration panel on narrow widths.

Allow the same markup to fit and grow without overflow.

HTML

<article class="resp-card"><h3>Weekend guide</h3><p>Find ideas for your next trip.</p></article>

CSS

.resp-card { width: 100%; max-width: 560px; box-sizing: border-box; padding: 18px; background: #d1fae5; border: 1px solid #34d399; border-radius: 10px; } .resp-card h3 { margin: 0 0 8px; } .resp-card p { margin: 0; }

Rendered output

Observe: The card fits its containing panel while retaining a comfortable maximum width.

A fixed 560px card does not fit a 300px container. A card with width:100% and max-width can grow when there is space but shrink when space is limited.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Responsive design is not just shrinking every element.

• A horizontally scrollable code sample is acceptable; forcing the entire page to scroll is usually not.

Set the flexible card max-width to 360px, then inspect its width at a narrow window.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Design for readable content first and use the available container width rather than device labels.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.