Course outline
Full-Stack course / Tools and the web

Clinic hours at different widths

Lab

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/06-03-clinic-hours-responsive
cd 06-03-clinic-hours-responsive
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

Goal

Style the clinic-hours entries so they stack in one column on narrow screens and form a two-column grid on wide screens.

Example

A one-column grid keeps each entry on its own row:

.schedule {
  display: grid;
  grid-template-columns: 1fr;
}

On a wider screen, a media query can change the number of columns. For example, a layout could switch at 52rem and use two equal columns once the viewport is wide enough.

Rules

  • Edit only styles.css. The provided index.html already links to it and contains four .clinic-hours__entry elements inside .clinic-hours.
  • Outside media queries, .clinic-hours must use CSS Grid with exactly one column.
  • Add a min-width: 52rem media query that changes .clinic-hours to two equal columns.
  • At a viewport width of 360px, the entries must remain in one column and the page must not have horizontal overflow. At 900px, the entries must use two columns.
  • Keep all four entries visible and in the existing HTML order. Do not hide entries or change the HTML.
  • Do not use JavaScript to change the layout.

What you'll practice

Building a mobile-first grid, then using a min-width media query to make use of extra space on a wide screen.

Run it

gonomicon fetch fs-week-1/06-03-clinic-hours-responsive
cd 06-03-clinic-hours-responsive
gonomicon test
gonomicon submit

Hints

  1. Start with .clinic-hours outside any media query. Its default grid should have one column, so the narrow layout works before the wide-screen rule applies.
  2. Use a min-width media query with the exact 52rem breakpoint; inside it, change the grid to two columns.
  3. Long labels should be allowed to shrink inside their grid cells. Check the page at 360px and make sure it does not create horizontal overflow.
PreviousNext lesson