Problem description

Given an HTML page structured with the following elements:

• A container <div class="dashboard-container"> wrapping all elements

• Inside, <aside class="sidebar"> containing navigation icons and <span class="label"> for each link

• <div class="main-content"> containing:

  • <div class="filter-panel"> with input fields (collapsed by default)

  • <button class="filter-toggle">Filter</button> (positioned floating in corners of small viewports)

  • <section class="widgets"> holding:

    • <div class="widget-summary">—summary metrics

    • <div class="widget-detail detail-1">—detail widget 1

    • <div class="widget-detail detail-2">—detail widget 2

    • <div class="widget-detail detail-3">—detail widget 3

Write CSS to satisfy the following:

1. Mobile (< 480px):

   1. .widgets displays only .widget-summary at full width.

   2. Hide .widget-detail.detail-1, .widget-detail.detail-2, and .widget-detail.detail-3.

   3. Hide .sidebar (display: none).

   4. Show .filter-toggle as a fixed circular button at bottom-right; hide .filter-panel by default.

   5. When .filter-toggle receives :focus or :hover, display .filter-panel as a fixed overlay covering 80% of viewport height from top.

2. Small tablet (480px–767px):

   1. .widgets shows .widget-summary and only .widget-detail.detail-1 stacked vertically (full width), hide other detail widgets.

   2. Hide .sidebar.

   3. .filter-panel appears inline above .widgets, collapsed initially (height: 0; overflow: hidden) and expands on .filter-panel:focus-within or .filter-panel:hover to a fixed height of 200px.

   4. Hide .filter-toggle.

3. Large tablet (768px–1023px):

   1. .widgets displays .widget-summary and .widget-detail.detail-1, .widget-detail.detail-2 in a two-column grid; hide .widget-detail.detail-3.

   2. Show .sidebar collapsed: display icons only (width: 60px; .label { display: none; }).

   3. .filter-panel is inline above widgets, collapsed by default and always expanded when viewport width ≥ 992px, i.e. @media (min-width: 992px) sets .filter-panel { height: auto; }.

   4. Hide .filter-toggle.

4. Desktop (≥ 1024px):

   1. .widgets displays three columns: .widget-summary, .widget-detail.detail-1, .widget-detail.detail-2, and .widget-detail.detail-3 arranged in a 3×2 layout (summary spanning two rows, details filling the remaining cells).

   2. Show .sidebar expanded (width: 200px; .label { display: inline-block; }).

   3. .filter-panel is shown inline above widgets at full width and expanded.

Goal

Implement a highly adaptive dashboard where the visibility and layout of widgets, the sidebar, and the filter panel change dynamically across four breakpoints, ensuring a seamless user experience on all devices using only CSS.

Constraints

• Use only CSS; JavaScript or HTML alterations are not allowed.

• Define breakpoints at exactly 480px, 768px, 992px, and 1024px.

• Use CSS Grid and/or Flexbox for layout.

• Use advanced selectors (:hover, :focus, :focus-within, and :nth-child) to control visibility and dynamic expansion.

• Ensure the filter panel overlay on mobile is scrollable internally if content overflows.

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.