Problem description

You are given an HTML page containing three main sections:

• A <div class="notification-banner"> that displays important messages

• An <aside class="sidebar"> that provides navigation links

• A <main class="content"> that contains the page’s primary content

Your task is to write CSS that makes the layout responsive across three breakpoints:

• Mobile (viewport width < 600px):

  • Display the .notification-banner fixed at the top of the page.

  • Hide the .sidebar.

  • Add top padding to .content so it does not overlap with the fixed banner.

• Tablet (viewport width 600px–1023px):

  • Display the .notification-banner as a normal block element above .content.

  • Keep the .sidebar hidden.

  • Remove the extra padding from .content.

• Desktop (viewport width ≥ 1024px):

  • Hide the .notification-banner.

  • Display the .sidebar as a fixed element on the right side of the screen, spanning full height with a width of 250px.

  • Adjust .content by adding right margin so it does not overlap with the sidebar.

Goal

Implement a notification banner and sidebar whose visibility and positioning toggle across breakpoints, prioritizing important messages on mobile and navigation on desktop.

Constraints

• Only use CSS; do not modify HTML or use JavaScript.

• Breakpoints are exactly 600px and 1024px.

• When .notification-banner is fixed, ensure the <main> content has appropriate top padding to avoid being hidden under the banner.

• The .sidebar should take up 250px width and full height when visible.

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.