HTML Responsive
In this page:
The Viewport Meta Tag
Mobile browsers automatically zoom out to fit large desktop layouts on smaller screens, making text tiny and hard to read. The viewport meta tag instructs mobile devices to render the page layout at the device's native scale, ensuring comfortable reading sizes.
Note: Always include the viewport meta tag inside the head section of every webpage you design.
Warning: Failing to include this viewport configuration tag will cause mobile devices to display your site as a tiny, zoomed-out desktop screen.
Example: The Viewport Meta Tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Fluid Container Widths
Instead of defining container widths in fixed pixels (which can overflow small mobile screens), fluid layouts use relative percentage values. This allows your columns and boxes to shrink and expand dynamically to fit any screen size.
Note: Use a percentage width combined with a max-width setting to keep your content from stretching too wide on massive screens.
Warning: Avoid setting fixed pixel widths on large containers to prevent layout cutoff and horizontal scrolling issues on smaller screens.
Example: Fluid Container Widths
<div style="width: 80%; max-width: 1000px;">
Fluid container
</div>Scalable Responsive Images
Large images can easily break your page layout on mobile screens by running off the side of the display. By applying relative widths and height controls using CSS, you can make your images scale down automatically to fit any device size.
Note: Use the style rules max-width: 100% and height: auto to make your images scale cleanly and stay proportional.
Warning: Avoid setting fixed pixel width attributes on images unless you want them to remain a static size across all screen dimensions.
Example: Scalable Responsive Images
<img src="photo.jpg" style="max-width: 100%; height: auto;" alt="Photo">Fluid Relative Typography
Fixed pixel font sizes (like font-size: 16px) do not adjust to different screens, which can make text hard to read. Using relative CSS units (like em, rem, or vw) allows your text sizes to scale dynamically relative to the user's browser or screen dimensions.
Note: Use rem units for consistent, accessible text scaling across all screen sizes.
Warning: Be careful when using viewport width units (vw) for font sizes, as text can become tiny on mobile devices.
Example: Fluid Relative Typography
<p style="font-size: 1rem;">Text that scales with the root font size</p>Introduction to CSS Media Queries
While HTML structures your content, CSS media queries are what allow you to build fully responsive designs. They act like conditional statements in your code, letting you apply specific layout rules based on the user's screen width.
Note: Design your website layouts for mobile screen dimensions first, then use media queries to adapt them for larger screens.
Warning: Make sure your media query break points are set correctly to avoid broken layouts on medium-sized screens like tablets.
Example: Introduction to CSS Media Queries
<style>
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
</style>CSS Breakpoints Explained
A breakpoint is a specific screen width where your layout changes to better fit the available space, defined using a media query. Common breakpoints target roughly phone, tablet, and desktop sizes, though the exact numbers should be based on where your own design actually starts to look broken, not arbitrary device widths.
Note: Design breakpoints based on where your content naturally wraps awkwardly, rather than copying exact pixel values from a specific phone model.
Warning: Chasing every possible device size with a unique breakpoint leads to messy, hard-to-maintain CSS — a handful of well-chosen breakpoints is enough for almost any site.
Example: CSS Breakpoints Explained
<style>
@media (min-width: 768px) {
.container {
width: 750px;
}
}
</style>
<div class="container">Resize the viewport to see the width change at 768px</div>Responsive Tables Technique
Wide tables with many columns are one of the hardest things to make mobile-friendly, since shrinking every column makes text unreadable. A common technique is wrapping the table in a scrollable container so users can swipe sideways, or restacking each row into a card layout on small screens using CSS.
Note: Wrapping a table in a div with overflow-x: auto is the simplest fix — it keeps the table fully intact while allowing horizontal scrolling on narrow screens.
Warning: Simply shrinking font sizes to force a wide table to fit on mobile makes the content difficult or impossible to read.
Example: Responsive Tables Technique
<div style="overflow-x: auto;">
<table>
<tr><td>Wide table content</td></tr>
</table>
</div>Mobile-First Approach
Mobile-first means writing your base CSS for small screens first, then using min-width media queries to add complexity as the screen gets larger, rather than the reverse. This approach tends to produce simpler, faster-loading CSS since phones — the most constrained devices — get the styles that matter most without any overrides.
Note: Start every stylesheet with simple, single-column mobile styles, then progressively enhance the layout for tablets and desktops using min-width queries.
Warning: A desktop-first approach, using max-width queries to shrink things down, tends to produce more overridden CSS and heavier stylesheets that phones still have to download.
Example: Mobile-First Approach
<style>
.box { width: 100%; }
@media (min-width: 768px) {
.box { width: 50%; }
}
</style>
<div class="box">Full width on mobile, half width from 768px up</div>- Forgetting to include the viewport meta tag inside your head section, which breaks mobile layout rendering.
- Setting hard-coded fixed pixel widths on container elements, leading to layout cutoff and horizontal scrolling issues on mobile devices.
- Overlooking responsive scaling settings on images, causing them to overflow their containers on smaller screens.
- The viewport meta tag instructs mobile browsers to render the webpage relative to the screen width of the user's device.
- Fluid widths, responsive images, and relative font units allow your layouts to scale dynamically across all devices.
- Use CSS media queries to apply custom styling rules when screen sizes cross defined pixel thresholds.
Standard responsive layout attributes and media queries are supported natively by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: