A 100% Practical Guide
CSS Media
Queries
Build One Website That Works on Every Screen
Project Overview
In this course, you will build a fully responsive portfolio website
from scratch using CSS media queries.
Your project will include:
• A hero section with your name and tagline
• A skills grid that reflows on smaller screens
• A projects gallery that adapts from 3 columns → 2 → 1
• A contact form that stacks vertically on mobile
By the end, your site will look great on Desktop (1200px+), Tablet
(768px), and Mobile (375px) — all with the same HTML file and
smart CSS breakpoints.
No frameworks. No libraries. Just pure CSS Media Queries.
What Are Media Queries?
A media query is a CSS rule that applies styles only when
certain conditions are true — like the screen width being smaller
than 768px.
Syntax:
@media (max-width: 768px) { body { font-size: 14px; } }
This tells the browser: "Only apply this style if the screen is 768px
wide or less."
Media queries are the foundation of responsive web design.
They let one website adapt its layout for desktops, tablets, and
phones — no separate sites needed.
Common breakpoints:
1200px (desktop), 768px (tablet), 480px (mobile).
Add @media rules at the bottom of your CSS file to override
default styles.
Basic Syntax
@media (max-width: 768px) { }
Targets screens 768px wide or SMALLER —
tablets and phones. Rules inside only apply
when the screen is narrow enough.
@media (min-width: 769px) { }
Targets screens 769px wide or LARGER —
desktops and laptops. Rules inside only
apply on wider screens.
Common Breakpoints
📱 Mobile: 320–480px
• Smallest screens, single column
• Stack all elements vertically
📟 Tablet: 481–768px
• Medium screens, 2-column layout
• Adjust font sizes & spacing
🖥 Desktop: 769px+
• Full layout, multi-column grids
• Max-width containers
/* VS Code Example /
/ Mobile First Approach */
body {
font-size: 14px;
padding: 10px;
}
/* Tablet Breakpoint */
@media (min-width: 481px) {
body {
font-size: 16px;
padding: 20px;
}
.container {
display: grid;
grid-template-columns:
1fr 1fr;
}
}
/* Desktop Breakpoint */
@media (min-width: 769px) {
body {
font-size: 18px;
max-width: 1200px;
margin: 0 auto;
}
.container {
grid-template-columns:
1fr 1fr 1fr;
}
}
Mobile-First
Start small, then scale up. Write your
base CSS for mobile screens first — no
media query needed. Use min-width
to progressively add styles for larger
screens.
Progressive Enhancement:
body { font-size: 14px; }
@media (min-width: 768px)
{ body { font-size: 16px; } }
@media (min-width: 1024px) { body {
font-size: 18px; } }
Build the HTML Structure
Step 1: Create your index.html file with the
responsive portfolio skeleton. Add the
viewport meta tag — this is essential for
media queries to work on mobile devices.
Link your stylesheet and set up semantic
sections: , , , and . This structure powers
every breakpoint we build next.
CSS Variables (Custom Properties)
CSS Variables are reusable values that you define once and use throughout your
CSS. They make it easy to maintain a consistent design and quickly update
styles.
Why Use CSS
Variables?
✔ Write cleaner, more organized CSS.
✔ Update a value once and apply it everywhere.
✔ Keep colors, fonts, and spacing consistent across your
website.
Step 2: Base CSS Styles
Typography Foundation — Set your base font in the body selector:
font-family: 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333333;
This ensures readable text across all screen sizes before any media queries are applied.
Color & Spacing Layout — Define your color palette and spacing as CSS variables at
the top:
:root { --primary: #3b82f6; --bg: #f9fafb; --gap: 1rem; }
body { background: var(--bg); padding: var(--gap); }
Using variables makes responsive adjustments simple and consistent throughout the
project.
Container Layout — Create a centered, max-width wrapper for all page content:
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
This single rule keeps your layout centered on large screens and full-width on small
screens.
Explanation
width: 100%;
Makes the container take up 100% of the available width of its parent element.
On smaller screens (like phones), the container stretches across the screen.
max-width: 1200px;
Prevents the container from becoming wider than 1200 pixels.
On large screens, the content stays readable instead of stretching too far.
margin: 0 auto;
0 means no top or bottom margin.
auto automatically adds equal left and right margins, centering the container on the page.
padding: 0 1rem;
0 = no padding at the top and bottom.
1rem = 1 rem (usually 16px) padding on the left and right.
This keeps the content from touching the edges of the screen, especially on mobile
devices.
Step 3: Mobile Styles
@media (max-width: 480px) {
.container {
width: 100%;
padding: 0 16px;
flex-direction: column;
}
nav ul {
flex-direction: column;
gap: 8px;
}
nav ul li a {
display: block;
padding: 12px;
}
}
Mobile Rules (320–480px):
• Single column layout
• Full-width elements
• Stacked navigation links
• Fluid images: width: 100%
Result: Stacked, thumb-friendly
layout on all phones!
Step 4: Tablet Styles
@media (min-width: 481px) and (max-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 16px;
}
}
Tablet range: 481px–768px. Two-column grid
activates, spacing adjusts. Nav stacks vertically,
images scale to 100% width, font-size increases to
1.1rem for readability on medium screens.
Desktop Styles
@media (min-width: 769px) {
.container {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
gap: 2rem;
}
nav ul {
display: flex;
flex-direction: row;
gap: 1.5rem;
}
.sidebar {
display: block;
}
}
Three-column grid activates at 769px+. Navigation goes horizontal. Hidden sidebar
reappears.
Responsive Images
Making Images Flexible:
• Use max-width: 100% so images never overflow their container
• img { max-width: 100%; height: auto; } keeps aspect ratio intact
• The element lets you serve different images per breakpoint
• Use inside for tablet+
Responsive Typography
Use rem units for scalable fonts.
Use clamp() for fluid font sizes that scale
Set a base font size on (e.g., 16px),
smoothly between breakpoints:
then define all text in rem:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
html { font-size: 16px; }
}
h1 { font-size: 2rem; }
Min = 1.5rem on mobile, max = 3rem on
p { font-size: 1rem; }
Adjust
the
breakpoint
base
size
at
each
and
every
element
scales automatically — no need to
rewrite every rule.
desktop.
Spacing
like
padding
and
margin should also use rem or clamp() to
stay proportional.
READ MORE...
Chrome DevTools
Open DevTools with F12, then click the
Toggle Device Toolbar icon (or press
Ctrl+Shift+M). Select a preset device or
enter a custom width. Watch your media
queries activate in real time as you resize!
In the Responsive view, drag the blue
handle to resize the viewport. When the
width crosses a breakpoint (e.g. 768px),
the layout shifts — columns stack, font
sizes change, and nav menus collapse.
Screenshot each breakpoint to compare!
Common
Mistakes
Forgetting the viewport meta tag — without , your media
queries won't work on mobile devices. Always include it in your
HTML . READ MORE...
Using px instead of relative units — fixed pixel values break
responsive layouts. Use em, rem, %, or vw/vh so elements scale
naturally across screen sizes.
Adding too many breakpoints — don't create a breakpoint for
every device. Use 2–3 major breakpoints (e.g., 480px, 768px,
1024px) and let your content guide the rest.
Challenges
Challenge 1: Mobile-First Layout
Write a CSS media query that:
• Sets font-size to 14px on
mobile
• Increases to 16px on tablets
(min-width: 768px)
• Uses 18px on desktops (minwidth: 1024px)
• Hides the sidebar on screens
below 600px
• Changes nav from column to
row on wider screens
Challenge 2: Responsive Grid
Build a card grid that:
• Shows 1 column on mobile
• Shows 2 columns at 600px+
• Shows 3 columns at 900px+
• Adjusts padding and gap at
each breakpoint
• Test your layout using
Chrome DevTools Responsive
Mode
Conclusion
Key Takeaways from CSS Media Queries: A 100% Practical Guide
1. Mobile-First Approach: Always write your base CSS for small screens first, then use minwidth media queries to scale up for larger devices. This keeps your code clean and
performant.
2.Test on Real Devices: Chrome DevTools Responsive Mode is a great starting point, but
always test on actual phones and tablets. Real devices reveal issues that emulators
miss.
3.Use Relative Units: Prefer rem, em, %, and vw/vh over fixed px values. Relative units make
your layouts naturally flexible across all screen sizes.
4.Keep Breakpoints Simple: Don't create breakpoints for every device. Use 3-4 logical
breakpoints (e.g., 480px, 768px, 1024px) based on your content, not specific device sizes.
Thank You!
Next Steps: Build your own responsive project • Explore CSS Grid & Flexbox
Presented by Alfredo Torres