Learning CSS - Responsive Layout with Media Queries
This episode covers responsive layout with media queries: the basic syntax and operators, commonly used breakpoints, the mobile-first versus desktop-first approaches, and smooth layout transition patterns across various screen sizes.
#Introduction
The same page should be comfortable to view on a 360px phone and a 1920px monitor. Media queries are the main gateway to that: CSS rules that only apply when certain conditions are met, most often the viewport width. Episode 8 built a two-dimensional Grid layout. Episode 9 teaches how to change that layout at different screen sizes — columns that shrink, menus that change, text that adapts. Why does it matter? Statistics show that the majority of web traffic now comes from mobile devices. Non-responsive pages make users zoom in and eventually leave. Media queries are a mandatory skill, not a nice-to-have.
#Media Query Basics
A media query attaches to a rule block and takes effect when its condition matches:
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}The rule above activates when the viewport is at most 768px wide. min-width and max-width are the most commonly used conditions, and both can be combined with and:
@media (min-width: 600px) and (max-width: 1024px) {
.menu-samping {
display: none;
}
}
@media (min-width: 1024px), (orientation: landscape) {
.hero {
flex-direction: row;
}
}The and operator requires all conditions to be met. A comma acts as or — the rule applies when either condition matches, for example a wide screen or landscape orientation.
#Mobile-First vs Desktop-First
There are two styles of writing media queries. Mobile-first writes the base styles for small screens and then expands with min-width. Desktop-first is the opposite: styles for large screens that then shrink with max-width:
.kartu {
display: block;
padding: 12px;
}
@media (min-width: 640px) {
.kartu {
display: flex;
gap: 16px;
padding: 24px;
}
}Mobile-first is more recommended: the base code is simpler, limited phone browsers don't have to process irrelevant rules, and the direction of change is natural — from simple to complex.
#Choosing Breakpoints
The best breakpoints are determined by content, not by specific devices. Common breakpoint sizes:
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(6, 1fr);
}
}Start with one breakpoint, then add more only when the layout genuinely starts looking cramped or over-stretched. Three or four breakpoints are enough for most projects.
#Common Responsive Layout Patterns
#Columns That Merge
The most classic pattern: a multi-column layout becomes a single column on small screens:
.halaman {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 900px) {
.halaman {
grid-template-columns: 240px 1fr;
}
}
@media (min-width: 1200px) {
.halaman {
grid-template-columns: 240px 1fr 280px;
}
}On small screens the sidebar sits below the content, appears to the side on medium screens, and additional content appears on wide screens.
#A Menu That Adapts
.nav-menu {
display: none;
}
@media (min-width: 768px) {
.nav-menu {
display: flex;
gap: 24px;
}
.tombol-menu {
display: none;
}
}On phones the menu is hidden and the hamburger button is shown; on larger screens the button disappears and the menu is visible. The HTML for both can be managed with a class toggled through JavaScript.
#Exercise: A Responsive Gallery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galeri Responsif</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="galeri">
<div class="item">Satu</div>
<div class="item">Dua</div>
<div class="item">Tiga</div>
<div class="item">Empat</div>
<div class="item">Lima</div>
<div class="item">Enam</div>
</main>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; }
.galeri { display: grid; grid-template-columns: 1fr; gap: 16px; }
.item { min-height: 120px; background-color: #2563eb; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
@media (min-width: 600px) { .galeri { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .galeri { grid-template-columns: repeat(3, 1fr); } }Run npx serve ., then open DevTools and enable responsive mode with the shortcut. Drag the viewport width and watch the gallery change from one column to two, then to three columns according to the breakpoints.
#Common Mistakes and Solutions
#Too Many Breakpoints
Adding a breakpoint for every device bloats the code. Focus on content behavior: add a breakpoint only when the layout looks bad, not when switching devices.
#Rule Order Getting in the Way
In mobile-first, larger min-width rules must come after smaller ones to win at the same specificity. The order you write determines the final result.
#Forgetting the Viewport Meta
Media queries don't work optimally without the viewport meta tag. Make sure every page includes width=device-width in the HTML head.
#Closing
Key takeaways:
- Media queries let different CSS apply at specific viewport conditions.
min-widthis used for the mobile-first approach;max-widthfor desktop-first.- Breakpoints are determined by content, not device names.
- Combine conditions with
and, create multiple conditions with commas. - Rule order determines the final result at equal specificity.
- Always include the viewport meta tag so responsiveness works on mobile devices.
In the next episode, episode 10, we'll cover modern units and fluid layout — using
rem, percentages,vw,vh, andclampso sizes adapt automatically to the screen.