MQ Examples — Code Challenge
Put combine responsive layout and user preferences into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- Different media features answer different questions: viewport size concerns space, while reduced-motion concerns a visitor preference. Write independent rules when the decisions are independent.
- Responsive design follows content constraints rather than a list of named devices. Resize continuously and check the first width at which the content needs a different arrangement.
- Keep a usable base layout before adding media queries. Verify text enlargement, keyboard focus, and a narrow viewport.
Your task
Use the HTML below to explore this rule: Different media features answer different questions: viewport size concerns space, while reduced-motion concerns a visitor preference. Write independent rules when the decisions are independent. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
.layout { display: grid; gap: 16px; }
@media (min-width: 650px) { .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<div class="layout"><article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Build a bird box</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Mend a favourite shirt</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article></div>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.layout { display: grid; gap: 16px; }
@media (min-width: 650px) { .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
Different media features answer different questions: viewport size concerns space, while reduced-motion concerns a visitor preference. Write independent rules when the decisions are independent.