How to Make HTML Responsive
Use responsive CSS rules so your HTML layout adapts to phones, tablets, laptops, and large desktop screens. The core idea is to let content resize, stack, and reflow based on available screen width.
What you’ll build or solve
You’ll learn how to make HTML responsive using the viewport meta tag, flexible widths, and media queries. You’ll also know how to keep layouts readable across mobile and desktop screens.
Learn HTML on Mimo
When this approach works best
This approach is the right choice when the same page needs to work well on many screen sizes.
Common real-world scenarios include:
- Landing pages
- Blog layouts
- Course lesson pages
- Product cards
- Dashboard sections
This is a bad idea when the content is meant for fixed-size print layouts or exported PDF pages.
Prerequisites
You only need:
- A basic HTML file
- A text editor
- Basic HTML and CSS knowledge
Step-by-step instructions
Step 1: Add the viewport tag and responsive CSS rules
Start with the viewport meta tag so mobile browsers use the real device width.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then use flexible widths and a media query to adapt the layout.
HTML
<div class="card-grid">
<div class="card">USA pricing</div>
<div class="card">UK pricing</div>
</div>
<style>
.card-grid {
display: flex;
gap: 16px;
}
.card {
width: 50%;
}
@media (max-width: 768px) {
.card-grid {
flex-direction: column;
}
.card {
width: 100%;
}
}
</style>
What to look for:
- The viewport tag is required for proper mobile scaling
- Use percentage widths instead of fixed pixels where possible
- Media queries adjust the layout at breakpoints
- Stacked layouts often work better on mobile
- Test common breakpoints like tablet and phone widths
Examples you can copy
Responsive card layout
HTML
<div class="cards">
<div class="card">France plan</div>
<div class="card">USA plan</div>
</div>
<style>
.cards {
display: flex;
gap: 20px;
}
.card {
width: 50%;
}
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
.card {
width: 100%;
}
}
</style>
Responsive image
HTML
<img src="hero.jpg" style="max-width: 100%; height: auto;">
Responsive text block
HTML
<div style="width: 80%; max-width: 700px;">
UK course pricing details
</div>
Common mistakes and how to fix them
Mistake 1: Forgetting the viewport meta tag
What the reader might do:
HTML
<head>
<title>Responsive page</title>
</head>
Why it breaks: mobile browsers may scale the full desktop layout instead of using the device width.
Corrected approach:
HTML
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive page</title>
</head>
Mistake 2: Using fixed widths everywhere
What the reader might do:
HTML
<div style="width: 1200px;">Content</div>
Why it breaks: fixed widths can overflow small screens.
Corrected approach:
HTML
<div style="width: 100%; max-width: 1200px;">Content</div>
Mistake 3: No mobile layout adjustment
What the reader might do:
HTML
<div class="cards">
<div style="width: 50%;">A</div>
<div style="width: 50%;">B</div>
</div>
Why it breaks: side-by-side layouts can become cramped on phones.
Corrected approach:
HTML
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
}
Troubleshooting
If the layout looks zoomed out on mobile, add the viewport meta tag.
If content overflows horizontally, replace fixed widths with percentages or max-width.
If cards feel too cramped on smaller screens, stack them with a media query.
If images overflow their container, use max-width: 100%.
Quick recap
- Add the viewport meta tag
- Use flexible widths like percentages
- Use media queries for smaller screens
- Stack layouts on mobile when needed
- Avoid fixed pixel widths for main containers
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot