Problem description

Given an HTML page with two main sections:

• <aside class="sidebar"> contains a list of recent posts, categories, and links.

• <main class="content"> contains the primary blog post content.

Write CSS to meet the following requirements:

• The .sidebar should be visible when the viewport width is 1200px or wider and hidden when the viewport width is less than 1200px.

• The .content section should always be visible and take full width when the sidebar is hidden.

Goal

Improve readability on smaller devices by hiding the sidebar, while displaying it on larger screens to support easier navigation and supplemental content.

Constraints

• Only use CSS; JavaScript or HTML changes are not allowed.

• Use exactly 1200px as the breakpoint.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.