CSSmarkup~10 mins

What is responsive design in CSS - Browser Rendering Explained

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - What is responsive design

Write HTML structure

↓

Apply CSS styles

↓

Detect screen size

↓

Apply media queries

↓

Adjust layout and font sizes

↓

Render updated page

The browser reads the HTML and CSS, then checks the screen size. It applies different CSS rules using media queries to adjust layout and styles, making the page look good on any device.

Render Steps - 3 Steps

Code Added:Basic HTML structure with header, main, footer

Before

[Empty page]

→

After

[Header]
[Main content]
[Footer]

The page shows three stacked sections: header on top, main content in the middle, and footer at the bottom.

🔧 Browser Action:Builds DOM tree and paints default block layout

Code Sample

A simple webpage that changes spacing and font size when the screen is smaller than 600px, making it easier to read on phones.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>My Website</header>
  <main>
    <section>Content goes here</section>
  </main>
  <footer>Footer info</footer>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 1rem;
}
header, footer {
  background-color: #4CAF50;
  color: white;
  padding: 1rem;
  text-align: center;
}
main {
  background-color: #f0f0f0;
  padding: 1rem;
  margin-top: 1rem;
}
/* Responsive layout for small screens */
@media (max-width: 600px) {
  body {
    margin: 0.5rem;
  }
  main {
    padding: 0.5rem;
  }
  header, footer {
    font-size: 1.2rem;
  }
}

Render Quiz - 3 Questions

Test your understanding

After applying step 3, what visual change happens on a screen narrower than 600px?

AThe main content disappears

BThe background colors change to blue

CThe font size in header and footer becomes larger and padding reduces

DThe page switches to a horizontal layout

Common Confusions - 2 Topics

Why doesn't my page change on small screens?

You might be missing the viewport meta tag in HTML. Without it, the browser doesn't know to scale the page for small devices.

💡 Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>.

Why do my media query styles not apply?

Check that your media query matches the screen size correctly and that CSS selectors are correct. Also, make sure your CSS file is linked properly.

💡 Use browser DevTools to resize screen and see if media queries activate.

Property Reference

Property	Value Applied	Visual Effect	Common Use
margin	1rem / 0.5rem	Space outside elements, controls page edges	Separate content from browser edges
padding	1rem / 0.5rem	Space inside elements, controls content spacing	Make text less cramped
font-size	default / 1.2rem	Size of text	Improve readability on small screens
@media	(max-width: 600px)	Applies styles only on small screens	Make layout responsive

Concept Snapshot

Responsive design uses CSS media queries to adjust layout and styles based on screen size. Key properties: margin, padding, font-size. Include viewport meta tag for proper scaling. Makes websites look good on phones, tablets, and desktops. Common breakpoint example: max-width: 600px for small screens.