One-sentence summary
Responsive design is a CSS approach that makes the same web page readable and usable on a phone, a tablet and a desktop screen.
Why does it matter?
You design a web page on your computer, but most people will open it on a phone. Screen widths vary a lot: a narrow phone is about 360 pixels wide, while a large desktop screen can be more than 1400 pixels.
If a page is built only for wide screens, the text looks tiny on a phone, the user has to scroll left and right, and images spill off the edge. Responsive design (a design that "responds" to the screen) fixes this: the layout rearranges itself based on the width of the screen.
In this lesson we will learn three ideas: flexible units, flexible images, and media queries that change the layout. By the end we will build a page that collapses into a single column on a narrow screen.
The viewport meta tag
Phones used to shrink a wide desktop page to fit. To prevent that, we add one line inside the page's <head>. This line is called the viewport meta tag, and it tells the browser to "show the page at the real device width."
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My First Responsive Page</title>
</head>width=device-width: make the page width equal to the device width.initial-scale=1: do not zoom in at the start.
Without this tag, none of your other responsive work will behave correctly on a phone. So this is always the first step.
Flexible units and flexible images
Percentages and rem instead of pixels
Fixed units tell a box to "always be exactly 600 pixels wide." On a narrow screen that box overflows. Instead we use flexible units.
%(percent): sets width in proportion to the parent box.width: 90%means "be 90 percent as wide as your parent."rem: a unit tied to the font size.1remis usually 16 pixels;2remis twice that. When the user makes text larger, sizes given inremgrow too.
Example: a wrapper that centers the content and narrows with the screen.
.wrapper {
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 1rem;
font-size: 1.125rem;
}Here the box is 90 percent of the screen but never wider than 960 pixels. On a big screen it does not stretch so far that reading becomes hard.
Images that never overflow with max-width
An image might really be 1200 pixels wide. On a narrow phone that image spills off the screen. One rule prevents this.
img {
max-width: 100%;
height: auto;
}max-width: 100% says "never be wider than your box," and height: auto keeps the height proportional so the image is not squashed. For accessibility, always keep the alt text on images.
<img src="robot.jpg" alt="Small educational robot sitting on a desk" />Changing the layout with media queries
What is a media query?
A media query is the CSS way of saying, "if the screen is this wide, apply these rules." This lets us write different layouts for narrow and wide screens.
The rule below runs only when the screen is wider than 600 pixels:
@media (min-width: 600px) {
body {
background-color: lightyellow;
}
}On screens narrower than 600 pixels this block is ignored. The min-width value is called a breakpoint.
A layout that collapses into one column
Now to our real goal. On a wide screen we want two cards side by side; on a narrow screen we want them stacked in a single column. First the HTML:
<main class="cards">
<article class="card">Card 1</article>
<article class="card">Card 2</article>
</main>The common approach is "mobile first": we write a single column by default, then switch to two columns for wide screens.
.cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 600px) {
.cards {
flex-direction: row;
}
.card {
flex: 1;
}
}On a narrow screen the cards stack as a column. Once the screen passes 600 pixels they become a row, and flex: 1 makes the two cards share the space equally.
The idea of flex and grid
display: flex arranges items along a row or a column; flex-direction chooses the direction. display: grid places items into a table of rows and columns. Both are core tools for responsive layout. For now it is enough to remember flex; we will explore grid more deeply later.
Hands-on practice
You will build your own responsive card page.
- Create an
index.htmlfile and add the viewport meta tag inside<head>. - Write a
<main class="cards">that holds three<article class="card">elements. - Link this CSS:
.cards {
display: flex;
flex-direction: column;
gap: 1rem;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.card {
padding: 1rem;
background-color: #eef;
}
@media (min-width: 700px) {
.cards { flex-direction: row; }
.card { flex: 1; }
}- Slowly make the browser window narrower and wider. Watch the cards switch between side by side and stacked at 700 pixels.
Tip: In Chrome or Firefox you can press F12 to open the developer tools and use the device view to imitate a phone screen.
Common mistakes
Forgetting the viewport meta tag
This is the most common mistake. Without the tag, media queries seem not to work on a phone. If a page looks shrunken on mobile, check this line first.
Making everything fixed pixels
Fixed values like width: 600px overflow on narrow screens. Prefer flexible measures such as %, max-width and rem for widths.
Not giving images a max-width
Without max-width: 100%, a large image forces the phone to scroll sideways. This is one of the most annoying mobile problems.
Choosing breakpoints by device name
Do not think "for iPhone" or "for Samsung." Instead, look at where your content starts to break and put the breakpoint there.
Safety note
Responsive design is about appearance, but when building pages we should also care about privacy. Do not put your real name, address, school, phone number or photo into your practice pages. Anyone can see a page once it is published on the internet.
This academy has no real sign-up or contact form; the examples in the lessons are only for practice. If you want to put your homework online, talk to an adult first and make sure it contains no personal information.
Lesson summary
- Responsive design makes a page look right on phones, tablets and desktops.
- The viewport meta tag is the required first step of every responsive page.
- Flexible units (
%,rem) adapt to different screens better than fixed pixels. max-width: 100%stops images from overflowing the screen.- A media query changes the layout at a breakpoint; with flex we can collapse into one column on narrow screens.
Review questions
- What is the goal of responsive design?
- What does the viewport meta tag do, and where is it written?
- What is the difference between
width: 90%andwidth: 900px? - Which CSS rule stops an image from overflowing on a narrow screen?
- What does
min-width: 600pxmean in a media query?
Answers
- To make the same page readable and usable across different screen widths, with the layout adjusting itself to the screen.
- It tells the browser to show the page at the device's real width; it is written inside the page's
<head>. 90%is flexible and narrows in proportion to its parent box;900pxis fixed and can overflow on a narrow screen.max-width: 100%(usually together withheight: auto) keeps the image from being wider than its box.- It means "apply these rules if the screen is at least 600 pixels wide"; 600 pixels is used as the breakpoint.
Source and verification note
For “Responsive Design”, verification focuses on whether the relationship between The viewport meta tag and Percentages and rem instead of pixels remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.
Next lesson
Introduction to JavaScript: We add behavior to the page and write our first small interactive example, where the text changes when a button is clicked.