Build responsive layout checkpoint inside the persistent Civic calendar: Responsive layout checkpoint starter project.
Layout and responsive
flexgridgapminmax@mediawrap
In styles.css, replace the empty rule with the exact responsive layout checkpoint declaration block.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
In styles.css, replace the empty rule with the exact responsive layout checkpoint declaration block.
Target styles.css · Inside .lesson-layout. Evidence .lesson-layout contains the lesson's primary declaration. Snippet.lesson-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
Next up
Add the exact gap and max-width declarations without removing the first rule.
Target styles.css · At the end of .lesson-layout. Evidence The component has a stable gap and bounded width. Snippetgap: 1rem;
max-width: 64rem;
Next up
Add the exact focus-visible rule and mobile media query, then Run and Check.
Target styles.css · After the component rule. Evidence Keyboard focus is visible and the layout collapses to one column at 720px. Snippet.lesson-layout button:focus-visible {
outline: 3px solid #5eead4;
outline-offset: 3px;
}
@media (max-width: 720px) { ... }
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped responsive layout checkpoint build while preserving each passing edit.
Start with the Current task. Open styles.css, use Show exact edit when needed, Run, then follow the highlighted next task.
Layout and responsive becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
@media
Adapt layout at smaller viewports.