Responsive Design & Media Queries

Designing for mobile, tablet, and desktop viewports

« CSS Grid Layout« Previous CSS Transitions & Keyframe Animations »Next »

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

The Viewport Meta Tag and @media

Step 1: Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in HTML.

Step 2: Use CSS Media Queries (@media) to apply different styles depending on screen width or orientation.

Media Query in Action

Try It Yourself »

/* Default mobile-first styles */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablets and larger (>= 768px) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktops and larger (>= 1024px) */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which CSS at-rule is used to apply different styles based on device viewport width?

« Previous: CSS Grid Layout Next: CSS Transitions & Keyframe Animations »