Responsive

Responsive design is the practice of building one layout that adapts to any screen size, using flexible units, fluid grids, and @media queries so a page looks great on phones, tablets, and desktops alike.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Imagine water in different containers: Water naturally fills whatever shape it's poured into — a glass, a bowl, a bottle. Responsive design works the same way: your content flows and adapts to whatever screen size it's viewed on, from a tiny phone to a giant desktop monitor.

Without responsive design, your website is like a rigid block of ice — it stays the same size no matter what container you put it in, and it overflows or looks broken on smaller screens.

Over 60% of all web traffic comes from mobile devices. If your website doesn't look good on a phone, most visitors will leave immediately. Google also uses mobile-first indexing , meaning it judges your site primarily by how it looks on mobile.

Every responsive website must include this tag in the <head> . Without it, mobile browsers will render your page at desktop width (typically 980px) and then shrink it down, making everything tiny and unreadable.

⚠️ Common Mistake: Forgetting this meta tag is the #1 reason responsive CSS "doesn't work." Always add it first!

Media queries let you apply different CSS rules based on screen size . Think of them as "if statements" for CSS — "if the screen is smaller than 768px, do this."

Breakpoints are the screen widths where your layout changes. Here are the most commonly used ones:

💡 Pro Tip: Don't overthink breakpoints. Most projects only need 2-3: one for mobile (~768px), one for tablet (~1024px), and desktop is the default.

There are two approaches to writing responsive CSS. Mobile-first is recommended by most professionals.

Using the right CSS units is crucial for responsive design. Avoid fixed px values for things that should scale.

Images are one of the biggest causes of broken responsive layouts. By default, images render at their natural size, which can overflow containers on smaller screens.

💡 Pro Tip: Always add max-width: 100%; height: auto; to all images. Many CSS resets include this automatically.

Let's put everything together — viewport meta tag, media queries, responsive units, and mobile-first design:

You now understand responsive design — the skill that makes your websites work on every device. Key takeaways:

Practice quiz

What does the viewport meta tag do for a responsive page?

Loads media queries faster
Compresses images on mobile
Tells mobile browsers to set the viewport width to the device's actual screen width
Disables zooming entirely

Answer: Tells mobile browsers to set the viewport width to the device's actual screen width. Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, mobile browsers render at ~980px desktop width and shrink the page, so it looks tiny.

Which media query applies styles only on screens 768px wide or narrower?

@media (max-width: 768px)
@media (min-width: 768px)
@media screen and (width: 768px)
@media (max-device: 768px)

Answer: @media (max-width: 768px). max-width: 768px matches when the viewport is at or below 768px — the classic mobile/desktop-first breakpoint.

In a mobile-first approach, which type of media query do you add for larger screens?

max-width queries
aspect-ratio queries
no queries are needed
min-width queries

Answer: min-width queries. Mobile-first writes the base (small-screen) styles first, then layers on enhancements with min-width queries as the screen grows.

What is the rule of thumb for the number of breakpoints most sites need?

One per device model
2-3 breakpoints
At least 10
None — use only fixed pixels

Answer: 2-3 breakpoints. Most projects need only 2-3 breakpoints (roughly mobile ~768px, tablet ~1024px, desktop default). More creates maintenance headaches.

What does the unit 'vw' refer to?

1% of the viewport width
The parent element's width
The root font size
A fixed value in pixels

Answer: 1% of the viewport width. vw is relative to the viewport: 100vw is the full viewport width, so 50vw is always half the screen width.

Which unit is best for setting font sizes so text scales with the user's preference?

Answer: rem. rem is relative to the root font size (16px by default), so it respects the user's chosen base size — ideal for fonts and spacing.

What is the essential CSS rule that keeps images from overflowing their container?

width: 100%; only
max-width: 100%; height: auto;
object-fit: cover; only
display: block;

Answer: max-width: 100%; height: auto;. max-width: 100% stops the image being wider than its container, and height: auto preserves the aspect ratio.

Why is using a fixed 'width: 800px' risky for responsive layouts?

It loads slowly
It disables media queries
It only works on desktop browsers
It overflows on screens narrower than 800px

Answer: It overflows on screens narrower than 800px. A fixed pixel width causes horizontal overflow on smaller screens. Use max-width: 800px with width: 100% instead so it can shrink.

What does 'mobile-first indexing' mean for SEO?

Google only indexes mobile apps
Google judges your site primarily by how it looks on mobile
Mobile pages load before desktop pages
Indexing is disabled on mobile

Answer: Google judges your site primarily by how it looks on mobile. Google primarily evaluates and ranks sites based on the mobile version, which is why responsive design directly affects SEO.

Why is hiding important content with display: none on mobile discouraged?

It slows the page down
It breaks media queries
It removes content users may still need; reorganise instead
It only hides images

Answer: It removes content users may still need; reorganise instead. Hiding important content with display: none denies it to mobile users. Better to reorganise the layout so the content is still reachable.