CSS Responsive Design
In this page:
The Mobile-First Workflow
Mobile-first design is the industry standard workflow. You write your default styles for small mobile screens first, then use min-width queries to add layout columns and spacing as screen sizes expand.
Note: Starting your layouts mobile-first keeps your stylesheets clean, simple, and fast on mobile connections.
Warning: Failing to design mobile-first can require writing complex, heavy code overrides to reset desktop styles on mobile.
Example: The Mobile-First Workflow
<style>
.box {
background: lightblue;
}
@media (min-width: 768px) {
.box {
background: lightgreen;
}
}
</style>
<div class="box">Mobile-first: default style, then a min-width override</div>Fluid Container Layout structures
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 Layout structures
<style>
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background: lightblue;
padding: 10px;
}
</style>
<div class="container">Fluid container</div>Scalable Responsive Media 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 Media Images
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://placehold.co/600x300" alt="Responsive image">Fluid typography (rem and em)
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 viewport units) 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 typography (rem and em)
<style>
h1 {
font-size: 2rem;
}
p {
font-size: 1em;
}
</style>
<h1>Scales with root font size</h1>
<p>Scales with parent font size</p>Responsive Navigation Menus
Navigation bars designed for desktops can easily break on mobile screens due to space limits. To build a responsive menu, use media queries to stack your navigation links vertically or hide them behind an interactive toggle button on smaller screens.
Note: Use mobile-first Flexbox column wraps to build clean, responsive navigation menus easily.
Warning: Make sure your mobile menus have easily clickable targets for touch navigation.
Example: Responsive Navigation Menus
<style>
.nav {
display: flex;
background: #eef;
padding: 10px;
gap: 10px;
}
@media (max-width: 600px) {
.nav {
flex-direction: column;
}
}
</style>
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
</nav>- 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.
- Overlooking responsive scaling settings on images, causing them to overflow their containers.
- Responsive design ensures your webpages automatically adapt to look beautiful on screens of all sizes.
- Write your default styles for small mobile screens first, then use min-width queries to scale up your layouts.
- Use fluid percentages, relative font units (rem), and responsive image configurations to prevent layout breaks.
Modern responsive design attributes, media queries, and relative units are supported natively by all web browsers.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: