A layout that bends instead of breaks

Goal

Add styles.css to your personal site so the nav and the main content stack on a narrow screen and spread into more columns on a wide one, with no sideways scrolling at either size.

Example

The bakery example from the lesson, applied to a page with its own <header>/<nav>/<main> — written mobile-first, so the no-query rule is the narrow-screen layout and the query only adds what changes for more room:

nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 36rem) {
  nav {
    flex-direction: row;
    gap: 1.5rem;
  }
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}

Rules

• Edit index.html to add <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head>, and link the new styles.css with <link rel="stylesheet" href="styles.css">. Don't remove or restructure the <header>/<nav>/<main>/<section>/<footer> elements from the previous part.
• nav's default rule (no media query) stacks its links in a column. main's default rule lays its sections out in a single column.
• Add at least one @media (min-width: ...) rule that switches nav to a row and main to more than one column once the screen is wide enough. Don't use @media (max-width: ...) for this — write the narrow layout as the plain default and only add what changes for more room, the same mobile-first order the lesson used.
• Don't give any element a fixed pixel width wider than about 300px outside that wider media query — a width like that forces a phone-width screen to scroll sideways no matter what the media query says.

What you'll practice

Writing a mobile-first layout — the narrow case as the plain rule, the wide case as a min-width media query addition — and wiring up the viewport meta tag a layout like this actually depends on.

Run it

gonomicon fetch fs-week-1/07-02-responsive-site-layout
cd 07-02-responsive-site-layout
gonomicon test
gonomicon submit

Hints

1. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to index.html's <head>, right alongside a new <link rel="stylesheet" href="styles.css">. Without the viewport meta tag, a phone renders the page at desktop width and shrinks it, which defeats every media query you write.
2. Write the narrow-screen layout first, with no media query at all: nav { display: flex; flex-direction: column; } and main { display: grid; grid-template-columns: 1fr; }. Only once that's right, add @media (min-width: 36rem) { ... } that flips nav to a row and main to more than one column.
3. Keep every width in rem or as a fraction (1fr, repeat(2, 1fr)) — never give an element a fixed pixel width wider than roughly 300px outside a wide-screen media query, or it'll force a phone to scroll sideways no matter what the media query says.