Responsive Page Layout
What Is It?
A responsive page fits small and large screens. HTML provides content; CSS controls how it is arranged.
What the Tags Mean
meta name="viewport": helps phone browsers use the screen width.main: main content.style: holds CSS rules.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page Layout</title>
<style>
main { max-width: 40rem; padding: 1rem; margin: auto; }
</style>
</head>
<body>
<main>
<h1>My page</h1>
<p>This content fits a narrow screen.</p>
</main>
</body>
</html>Browser preview
What you see: The content has padding and stops growing after 40rem. It can still shrink on a smaller screen.
Example 2: Another Use
A grid can stack on phones and use two columns on wider screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page Layout</title>
<style>
.cards { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
.cards { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
<div class="cards">
<p>First card</p>
<p>Second card</p>
</div>
</body>
</html>Browser preview
Simple Tip
Resize the browser to test the page instead of guessing how it looks on a phone.
Try It Yourself
Change the breakpoint from 40rem to 50rem and resize again.