Responsive Design: Viewport and Media Queries

If a page looks fine on a desktop but shows tiny text or horizontal scrolling on a phone, separate two problems: the browser's viewport and the CSS layout used to fit content into it. A viewport meta tag does not automatically make a fixed-width table or image responsive.

Place the viewport tag inside head

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

width=device-width asks the browser to use the device width in CSS pixels for layout. CSS pixels are not necessarily physical screen pixels. The initial scale is set to 1. Do not add settings that prevent users from zooming; people who enlarge text still need access to the page.

Start with a layout that works on narrow screens

In this example, .cards is the container holding the cards. The base rule creates one column. A second and then a third column appear when space allows, without changing the cards' headings or content.

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cards > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

The 40rem and 64rem breakpoints are examples for this layout, not universal definitions of a phone or tablet. Choose them by observing where your content becomes cramped. Adding min-width rules above a base layout also avoids gaps between separately defined ranges such as 576px and 577px.

When a media query seems to do nothing

• Check the viewport width and whether the rule matches in developer tools.
• Confirm that the stylesheet loaded and an older cached version is not being used.
• If the rule matches but has no effect, inspect later declarations and more specific selectors.
• Look for a fixed-width child, a long URL, or a minimum content size that prevents shrinking.

Hiding overflow with overflow-x: hidden can conceal clipped content instead of solving the problem. Find the overflowing element first. Code blocks and tables may need their own horizontal scrolling area to remain readable.

Test between the usual device presets

Resize the window just below and above each breakpoint. Repeat the test with a long heading, a long link, and a missing image. Then enlarge the text and move through links with the keyboard. If a button disappears below a card, investigate fixed heights and overflow rules rather than only changing the column count.

For alignment inside cards, see Flexbox versus Grid. Reference: MDN's media query guide.