SyntaxShelf

Responsive

2 snippets in HTML & CSS

HCHTML & CSS

Viewport Meta Tag

HC · Document Structure
Syntax
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note Without this, mobile browsers render at a desktop width and then shrink the result. Essential for every responsive site.

Media Queries

HC · Responsive Design
Syntax
@media (condition) { ... }
Example
/* Mobile-first approach */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Note Mobile-first (min-width) is the recommended approach: start with small screens and add complexity at wider breakpoints. Common breakpoints: 640px (small), 768px (medium), 1024px (large), 1280px (extra large).

Frequently asked questions

How does HTML & CSS handle responsive?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Viewport Meta Tag" snippet in HTML & CSS uses `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
Which code does the HTML & CSS example use?
The "Viewport Meta Tag" snippet uses `<meta name="viewport" content="width=device-width, initial-scale=1.0">`, from the Document Structure section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "responsive"?
Besides "Viewport Meta Tag", this page also shows "Media Queries".
Is there anything to watch out for?
Yes. For "Viewport Meta Tag": Without this, mobile browsers render at a desktop width and then shrink the result. Essential for every responsive site.

Browse all tasks by intent