Container Queries Practice

In this assignment, you will apply container queries to create components that adapt based on their container width rather than the viewport. You will work with the analytics dashboard starter files to implement responsive widget layouts that demonstrate when component-level responsiveness is superior to viewport-level media queries.

This assignment focuses on practical application of @container queries, container query units, and modern CSS techniques to build truly modular, reusable components.

Preparation

Download the starter files and add them to your portfolio repository. The starter files include a complete dashboard layout with five different widget types, each requiring container query implementation.

1. Download and Extract Starter Files

Download container-queries.zip and extract it. Add the files to your portfolio with this structure:

        portfolio/
        └── unit-3/
            └── container-queries/
                ├── css/
                │   ├── base.css
                │   └── styles.css
                └── index.html
    

Open index.html in your browser. You will see a dashboard with widgets that do not yet respond to their container sizes. Your task is to implement the container queries marked with TODO comments in the CSS files.

Understanding the Dashboard Structure

The dashboard uses a 12-column grid system to place widgets in different-sized containers. This creates the exact scenario where container queries shine: the same widget component appears in multiple different container widths simultaneously.

Notice how stat cards appear in narrow (3-column) containers while the revenue chart and product list appear in wide (6-column) containers. When the viewport shrinks, the grid adjusts via media queries, but the widgets inside need container queries to adapt to their specific container size.

Assignment Instructions

1. Enable Container Query Context

Before any @container queries can work, you must establish a containment context. Without this step, your container queries will be ignored by the browser.

Open css/base.css and locate the .widget-container rule. Add the property that enables container queries. Refer to your learning materials or MDN documentation if you need to look up the correct property and value.

2. Implement Stat Card Container Queries

The stat cards need three distinct layouts depending on their container width. Study the existing CSS for .stat-card and its children to understand the default (narrow) layout.

Your task is to write container queries that change the layout at three breakpoints. The TODO comments in css/styles.css provide hints about what should change at each breakpoint:

• At 200px: Icon and title should display horizontally
• At 250px: Entire card should be horizontal with space between elements
• At 350px: Mini chart should become visible

Think about which CSS properties need to change to achieve these layouts. Consider flex-direction, justify-content, display, and sizing properties.

3. Add Fluid Typography with Container Query Units

Container query units allow elements to scale proportionally with their container. The stat card values and labels should grow and shrink smoothly as the container size changes.

Find the fixed font-size declarations in the stat card styles. Replace them with clamp() functions that use container query inline size (cqi) units.

Apply this technique to several elements. The TODO comments indicate which properties should use fluid sizing instead of fixed values.

4. Implement Remaining Widget Container Queries

Each widget type has different responsive needs. Work through the TODO comments in css/styles.css for:

• Revenue Chart: Header and stats need to reorganize horizontally at wider sizes
• Product List: Product items need to handle narrow containers, then the list itself needs multi-column layouts at wider sizes
• Activity Items: Should stack vertically when narrow, then display horizontally when wider
• Performance Metrics: Grid should progressively add columns (1 → 2 → 3 → 4 → 5) at different container widths

Each TODO comment provides hints about what should happen at each breakpoint. Your job is to determine which CSS properties accomplish those layout changes and write the appropriate container queries.

5. Implement Page-Level Media Queries

While container queries handle widget responsiveness, media queries still control the dashboard grid layout. Open css/base.css and implement the media queries for tablet and mobile breakpoints.

The TODO comments indicate what needs to happen at each breakpoint:

• Tablet (max-width: 1200px): Adjust grid column spans so widgets fit better on medium screens
• Mobile (max-width: 768px): Stack all widgets full-width and reduce spacing to minimize wasted space

These media queries are provided with detailed hints because they control page layout rather than component behavior. Focus your learning on the container queries.

6. Test and Refine

Test your implementation thoroughly by resizing your browser window and observing how widgets adapt. Pay attention to:

• Do widgets respond to their container size or to the viewport?
• Does the same widget look appropriate in both narrow and wide containers?
• Does typography scale smoothly or jump between fixed sizes?
• Do layouts break or overlap at any container size?

Use your browser's developer tools to inspect elements and verify that your container queries are applying at the expected breakpoints.

Key Concepts to Demonstrate

Your completed dashboard should clearly demonstrate:

• Component-level responsiveness: Widgets adapt to container size, not viewport size
• Container query syntax: Proper use of @container rules with min-width and max-width
• Container query units: Fluid sizing with cqi units in clamp() functions
• Separation of concerns: Media queries for page layout, container queries for component layout
• Progressive enhancement: Layouts that work from narrow to wide without breaking

Browser Support and Testing

Container queries have excellent browser support as of 2024. However, you should still test your implementation in multiple browsers to ensure consistent behavior.

Submission

Complete the submission form below. You will document your implementation, explain your container query strategy, and provide a link to your live portfolio page.