Day 2: Media Queries & Breakpoints

Daily Objective

Apply responsive breakpoints using CSS @media rules.

1. Standard Breakpoints

• Mobile: Under 600px (base CSS)
• Tablet: @media (min-width: 768px)
• Desktop: @media (min-width: 1024px)

/* Mobile base styles */
.site-nav {
  display: none;
}

/* Tablet & Desktop */
@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }
}

Daily Hands-on Practice (70%)

1. Turn on Device Mode in Chrome DevTools (Ctrl + Shift + M) and test simulated iPhone, iPad, and desktop viewports.
2. Build a layout that stacks vertically on mobile and arranges into 3 columns on tablet/desktop.