Responsive Design — One Website, Every Device! 📱💻🖥️

Your website will be viewed on phones, tablets and computers with very different screen sizes. Responsive design makes sure it looks great on ALL of them!

The Viewport Meta Tag (ESSENTIAL!)

Always add this to your <head> — it tells phones to display at the right size:

HTML

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

Without this, your page looks tiny on phones! 😱

Media Queries — Different Styles for Different Screens

CSS

/* Default styles (mobile first — small screens) */
.card-grid {
  display: flex;
  flex-direction: column;    /* Stack cards vertically on phone */
  gap: 16px;
}

/* Tablet and bigger (768px+) */
@media (min-width: 768px) {
  .card-grid {
    flex-direction: row;     /* Side by side on tablet */
    flex-wrap: wrap;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .card-grid {
    justify-content: space-between;
  }
}

Common Breakpoints

| Device | Width | |--------|-------| | Mobile | < 768px | | Tablet | 768px – 1023px | | Desktop | 1024px+ |

Responsive Typography

CSS

h1 {
  font-size: 28px;    /* phone: smaller */
}

@media (min-width: 768px) {
  h1 {
    font-size: 40px;  /* tablet: bigger */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 56px;  /* desktop: largest */
  }
}

Percentage Widths & Max-Width

CSS

.container {
  width: 90%;           /* 90% of screen width */
  max-width: 1200px;    /* but never wider than 1200px */
  margin: 0 auto;       /* centre it */
}

img {
  width: 100%;          /* fills its container */
  max-width: 600px;     /* but never wider than 600px */
  height: auto;         /* keeps aspect ratio */
}

🌟 Responsive Card Layout

CSS

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 280px;   /* grow/shrink, but min 280px wide */
  /* On small screens: one column */
  /* On medium screens: two columns */
  /* On large screens: three columns */
}

This is how Netflix layouts their movie cards, YouTube layouts video thumbnails, and Amazon displays products! 🛒

Mobile-First Tip

Always design for mobile first, then add media queries for bigger screens. Most web traffic comes from phones these days! 📱

Responsive Design – Websites that Work Everywhere!