CSS Responsive Design and Media Queries

A responsive page changes its layout to fit the screen it is shown on, from a small phone to a wide laptop.

Why It Matters

In Pakistan, most people browse the internet on their phones. If your page only looks right on a laptop, most of your visitors will have a bad experience, and Google will rank the page lower.

Step 1: The Viewport Tag

Always put this line in the <head>. Without it, phones pretend to be a wide screen and shrink the whole page.

Example

html

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

Step 2: Flexible Sizes

Use percentages, max-width and flexible layouts instead of fixed pixel widths.

Example

css

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% on images stops them from being wider than the screen.

Step 3: Media Queries

A media query applies CSS only when a condition is true, usually the width of the screen.

Example

css

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

This rule only works when the screen is 600px wide or less.

Query	Applies when
`@media (max-width: 600px)`	Screen is 600px or narrower
`@media (min-width: 768px)`	Screen is 768px or wider
`@media (min-width: 768px) and (max-width: 1024px)`	Between the two
`@media (orientation: landscape)`	The screen is wider than it is tall
`@media print`	The page is being printed

Mobile-First Design

The modern way is to write the phone styles first, then add min-width media queries for bigger screens. Phones then load the simplest CSS.

Example

html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial, sans-serif; margin: 0; }
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
}
.card {
  background-color: #e0e7ff;
  padding: 20px;
  border-radius: 8px;
}

/* Tablets: two columns */
@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

/* Laptops: four columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}
</style>
</head>
<body>

<div class="cards">
  <div class="card">Lahore</div>
  <div class="card">Karachi</div>
  <div class="card">Islamabad</div>
  <div class="card">Peshawar</div>
</div>

</body>
</html>

Try it Yourself »

Make the result window narrower and wider. The cards change from one column to two, then four.

Hiding and Showing Content

Sometimes you show a short menu button on phones and the full menu on bigger screens:

Example

html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.full-menu { display: none; }
.menu-button { display: inline-block; }

@media (min-width: 700px) {
  .full-menu { display: block; }
  .menu-button { display: none; }
}
</style>
</head>
<body>

<button class="menu-button">Menu</button>
<p class="full-menu">Home | Courses | Tutorials | Contact</p>

</body>
</html>

Try it Yourself »

Common Breakpoints

A breakpoint is a width where the layout changes. There are no fixed rules, but these are popular:

576px: large phones
768px: tablets
992px: small laptops
1200px: large screens

Choose breakpoints where your design starts to look wrong, not only for well-known devices. Slowly drag the browser window narrower and add a breakpoint wherever the layout breaks.

Exercise

In mobile-first CSS, which kind of media query do you mostly use to add styles for bigger screens?

min-widthmax-widthprintorientation: portrait