Lesson 8 of 8
Responsive Design
Responsive design makes your website look good on all screen sizes. Use media queries to apply different styles at different widths.
Always use relative units like %, em, rem, and vw/vh instead of fixed pixels where possible.
CSS
/* Mobile first: default styles */
.container { padding: 24px; }
/* Tablet and up */
@media (min-width: 768px) {
.container { padding: 48px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}