💡 An editor is ready below the article—experiment freely!
Updated: May 31, 2026
Responsive Media Query
📌
Conclusion
Responsive Media Query — free browser-based HTML/CSS/JS practice
Why it matters in real projects
Media queries change styles based on the viewport width. Similar patterns appear daily in code review and production UI work.Step-by-step workflow
1. Read the guide and understand the goal of "Responsive Media Query" 2. Review the HTML/CSS/JS editor pane and start from the starter code 3. Open hints if stuck; compare your diff with the sample solution 4. Click Run and inspect preview/console output 5. Auto-check looks for output containing: @media, 768. 6. After success, continue with adjacent exercises in the same categoryCore concept explained
Media queries change styles based on the viewport width.Technical focus
Key HTML elements in this task: div, style.Hint before you peek at the solution
Change grid-template-columns inside @media (min-width: 768px).Sample solution walkthrough
The solution uses HTML tags such as div, style. Check nesting and closing tags. CSS properties include display, grid-template-columns, min-width. Watch selector spelling and specificity. Explanation: Media queries change styles based on the viewport width. Hint recap: Change grid-template-columns inside @media (min-width: 768px).Solution code
📝 Sample code
<div class="r"><div>1</div><div>2</div></div>
<style>.r { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .r { grid-template-columns: 1fr 1fr; } }</style>Common mistakes for this exact task
- Skipping the hint: Change grid-template-columns inside @media (min-width: 768px).Troubleshooting
Q: Preview does not change after Run A: Ensure you edited the HTML/CSS/JS pane and clicked Run. Q: Looks correct but check fails A: Auto-check looks for output containing: @media, 768. Look for typos, full-width spaces, or unclosed tags. Q: Console shows errors A: Open DevTools Console and fix bracket/quote mismatches at the reported line. Q: Hard to type on mobile A: Use landscape mode or continue on desktop—the same URL keeps progress in localStorage.Interview / portfolio tips
- Explain the techniques in "Responsive Media Query" in your own words within 30 seconds - Practice walking through each line of the sample solution on a whiteboard - Be ready to discuss tags: div, style - Discuss CSS properties: display, grid-template-columns, min-width - Prepare one alternative approach and why you chose this oneWhat to do after you pass
Move to the next exercise in the css-layout track, then continue the learning roadmap at /en/learning/layout/.Keywords
Free hands-on exercise covering Responsive design, css-layout, intermediate, div, style, display, grid-template-columns, min-width, responsive media query—search-friendly guide for Responsive Media Query.🧪 Try it here — safe to break things
Use the editor below to write code and preview instantly.
Jump to editor■ Exercise task
Make a 2-column layout at 768px and above, and a 1-column layout below.
Hint if stuck
Change grid-template-columns inside @media (min-width: 768px).