Ananta Code Academy
ananta::html-css
MODULE 04 · LAYOUT & RESPONSIVENESS

Responsive Design & Media Queries

A layout that only works at one screen size isn't finished. Media queries let a stylesheet adapt to the device it's running on — rearranging, resizing, or hiding content as the viewport changes.

Day 26 of 30 Intermediate ~20 min
01 · OVERVIEW

Designing for Every Screen, Not Just Yours

Responsive design means a page adapts to whatever device it's viewed on — a phone, a tablet, a laptop, an ultra-wide monitor — instead of being built for one fixed screen size and breaking everywhere else.

02 · THE VIEWPORT META TAG

A Prerequisite in the HTML, Not the CSS

Without this tag in the <head>, mobile browsers render the page at desktop width and zoom out — media queries won't behave as expected. It should be on every page from Day 1 onward.

index.html 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
03 · WRITING A MEDIA QUERY

@media and max-width

A media query wraps a block of CSS rules in a condition. max-width: 600px means "apply this only when the viewport is 600px wide or narrower."

style.css 
.nav-links {
  display: flex;
}

/* applies only at 600px wide or narrower */
@media (max-width: 600px) {
  .nav-links {
    display: none;
  }
}
TRY IT

Drag the bottom-right corner of the box below to resize it — the cards rewrap as the container narrows, the same way a real page would respond to a smaller viewport.

RESIZABLE DEMO — DRAG THE CORNER
Card 1
Card 2
Card 3

↘ drag the bottom-right corner

04 · MOBILE-FIRST vs DESKTOP-FIRST

Which Direction Do You Write Rules In?

Two common approaches exist. Desktop-first starts with full-width styles and narrows down with max-width queries. Mobile-first starts with small-screen styles and expands upward with min-width queries — the more common modern approach.

APPROACH HOW IT WORKS
Mobile-first

Base CSS targets small screens; min-width queries add complexity for larger ones.

Desktop-first

Base CSS targets large screens; max-width queries simplify the layout for smaller ones.

style.css 
/* mobile-first: base styles are for small screens */
.cards {
  display: flex;
  flex-direction: column;
}

/* expand to a row once there's enough width */
@media (min-width: 700px) {
  .cards {
    flex-direction: row;
  }
}
05 · COMMON BREAKPOINTS

Where to Set Your max-width Values

There's no official standard, but most projects converge on similar ranges, based on common device widths rather than any single "correct" number.

TYPICAL BREAKPOINT RANGES
Mobile — up to 480px
Tablet — up to 768px
Desktop — 1024px+
GOOD TO KNOW

Don't chase exact device widths — new phones and tablets ship every year. Set breakpoints where your own layout actually starts to look cramped, not at a specific model's screen size.

06 · MOBILE PATTERNS TO AVOID

Common Responsive Mistakes

AVOID VS PREFER
AVOID Fixed pixel widths on containers, and hiding content with display: none instead of rearranging it.
PREFER Flexible units (%, fr, rem) as the default, with media queries adjusting layout — not hiding real content.
07 · BREAKDOWN

Breaking Down What You Just Learned

1

Viewport tagThe meta viewport tag in HTML is required before media queries behave correctly on mobile.

2

@media syntax@media (max-width: Npx) { } wraps CSS rules that only apply below a given width.

3

Mobile-firstBase styles target small screens; min-width queries layer on complexity for bigger ones.

4

BreakpointsCommon ranges cluster around ~480px, ~768px, and ~1024px, but should follow your layout, not a device list.

5

Rearrange, don't hidePrefer flexible layouts that adapt over display: none hiding real content on small screens.

08 · PRACTICE

Try It Yourself

EXERCISE

Take the flex or grid page skeleton from Day 24 or 25 and add a media query that stacks the sidebar under the content once the viewport drops below 700px.

09 · TODAY'S PRACTICE

Make a Layout Genuinely Responsive

HANDS-ON EXERCISE

Practicing mobile-first media queries

Create day26.html linked to a stylesheet and build the following on the page.

  1. Confirm the viewport meta tag is present in the head.
  2. Write mobile-first base styles: a single-column flex layout with flex-direction: column.
  3. Add a min-width: 700px media query that switches the layout to flex-direction: row.
  4. Add a nav bar that collapses its links at max-width: 600px, without deleting them from the HTML.
  5. Resize the browser window and confirm the layout adapts smoothly at each breakpoint.
10 · RECAP

Recap

VIEWPORT TAG

Required in the HTML head for media queries to work correctly on mobile devices.

MEDIA QUERIES

@media wraps CSS rules that apply only when a condition like max-width is met.

MOBILE-FIRST

Base styles target small screens first; min-width queries expand the layout upward.

BREAKPOINTS

Set based on where your own layout looks cramped, not a specific device's screen size.

11 · SUMMARY

Key Takeaways

  • The viewport meta tag must be present in the HTML for media queries to behave correctly on mobile.
  • @media (max-width: Npx) { } applies CSS rules only when the viewport is at or below that width.
  • Mobile-first design writes base styles for small screens and expands with min-width queries.
  • Breakpoints should follow where a layout actually breaks down, not a fixed list of device sizes.
  • Responsive design rearranges and resizes content — it doesn't hide real content with display: none.
Course Overview