Python Responsive Design & Media Queries (@media)
Over 60% of all web traffic comes from mobile devices. Media queries (@media) allow you to apply specific CSS rules conditionally based on the screen width of the device (e.g. flipping a 3-column desktop grid into a single vertical column on mobile).
"A media query is like a responsive wardrobe. In winter (screen < 768px), you wear a single compact heavy jacket (1 column). In summer on the beach (screen > 1200px), you spread out a wide 4-person picnic blanket (4 columns)."
Deep Dive: How It Works
@media (max-width: 768px): Applies styles only when screen width is 768px or smaller (tablets & phones).
Mobile-First Approach: Write default styles for phones first, then use @media (min-width: 768px) to add multi-column grids for desktops.
Common Breakpoints: Mobile (< 640px), Tablet (641px - 1024px), Desktop (> 1024px).
Responsive Flexbox: Flipping flex-direction: row on desktop to flex-direction: column on mobile is the universal responsive layout trick.
Syntax Blueprint
/* Desktop Default: 3 Columns */
.grid {
display: flex;
gap: 16px;
}
/* Mobile: 1 Column */
@media (max-width: 768px) {
.grid {
flex-direction: column;
}
}Flip horizontal flex rows into vertical columns on small screens.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Writing hardcoded fixed widths inside media queriesWhy it happens: Using width: 400px inside a 360px wide phone view causes horizontal scrolling.
How to fix: Use width: 100%; or max-width: 100%; on mobile screens.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Write a mobile media query
- Write a media query @media (max-width: 768px) containing a rule for .sidebar setting display: none;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.