Adapt Layouts with Fluid Sizing and Media Queries

A browser uses a layout viewport: the available space it uses to lay out a page. On a mobile browser, if a page does not declare its viewport, the browser may lay out the page in a wider space and then scale the whole result down. Text and controls can appear unexpectedly small.

Add one metadata element in the HTML <head> so the layout viewport follows the device width. This affects layout; it does not replace CSS sizing rules.

Create or open two files in the same local folder: index.html and styles.css. Save the complete HTML below as index.html. It connects the stylesheet, places the viewport declaration in the <head>, and provides the Community Workshops content that later steps will adapt.

Save as index.html

Save as styles.css

A fluid container changes size continuously as its containing block changes. In this page, .page uses a percentage width, so it can become narrower or wider with the available layout space.

A percentage alone can become too wide on a large viewport. Add a max-width cap: below that cap, the container grows and shrinks; once it reaches the cap, its own width stops growing.

In styles.css, replace the current starter stylesheet with this complete version. It preserves the starter sizing and body rules, then adds the .page rule.

The percentage width provides the fluid foundation. max-width limits that width rather than replacing it. margin: 0 auto; means zero vertical margin and automatic horizontal margins. When horizontal space remains, the browser divides it between the two sides and centers the container.

Replace the current contents of styles.css with this complete stylesheet, then save and refresh index.html.

A fluid container can change continuously: as the viewport gains or loses space, the container becomes wider or narrower within its existing rules. Nothing else has to rearrange.

A breakpoint is different. It is a point where the content needs a different arrangement—for example, a stacked header becoming a row or a one-column card layout becoming two columns. The change is discrete rather than gradual.

Resize the viewport gradually and watch the content, not a device name. Fluid sizing may be enough for a range of widths. Consider a new arrangement only when the current one stops serving the content well.

Useful signals include navigation labels becoming crowded, side-by-side columns becoming too cramped, or single-column cards becoming unnecessarily spread out. These are content-fit observations, not universal measurements.

A media query applies its nested CSS rules only when its condition matches. Write narrow-screen base styles first, outside any query. Then add an override for a wider viewport.

For this page, the base grid keeps gap: 1rem;. At the candidate breakpoint, a later rule changes only that gap. The layout does not need a new structure yet.

Place one @media block at the end of styles.css. min-width matches when the viewport is 768 CSS pixels or wider, including exactly 768px.

The nested .workshop-grid rule has the same selector as the base rule and comes later, so its gap value overrides the base value when the query matches. Keep declarations that do not change—such as display and grid-template-columns—in the base rule. They continue to apply without being repeated.

Replace the current contents of styles.css with this complete version. The single media query is the final block; later steps will extend this same block rather than add another one.

The header keeps the same HTML order at every viewport: the h1 comes first, followed by the navigation. Only its presentation changes.

In the Narrow viewport base styles, stack the title above the navigation. Let navigation links wrap so longer labels or reduced space do not force a crowded row. When the viewport has enough room, the existing wide-viewport override can place the title and navigation beside each other.

Replace the current contents of styles.css with this complete version, then save and refresh index.html. It preserves the earlier container and grid rules, adds the header base styles, and extends the one existing @media (min-width: 768px) block.

The override repeats only properties that change. The header stays a flex container, its base gap remains available, and navigation wrapping remains available without duplication.

Complete, runnable stylesheet: replace the contents of styles.css with this code.

The base styles describe the Narrow viewport: one explicit, shrinkable grid column places all three cards automatically in document order. The featured card needs no special placement there.

At the breakpoint, coordinate two changes in the existing wide-viewport override: create two explicit columns, then let the featured card span both columns. A two-column span is valid only where those two columns exist.

Replace the current contents of styles.css with this complete stylesheet, then save and refresh index.html. It retains the existing single media query at the end of the file. The base grid stays one column; the wide-viewport override adds both the second column and the featured-card span.

Use the same two local files: index.html and styles.css. The reference below preserves the established document order and all example content. Save it as index.html only if you need to restore or compare your file; the responsive behavior is defined in the stylesheet on the next screen.

Replace the entire contents of styles.css with this completed reference. Replacing the file avoids duplicate rules or a second media query. The base styles form the fluid foundation; the one existing media-query block remains at the end and contains only the wide-viewport overrides.

Complete the missing values in this integrated excerpt. It combines the bounded fluid container with the targeted wide-viewport header and grid changes.

Save both files and refresh index.html in your own browser. Resize from a narrow viewport through the candidate breakpoint and into a much wider viewport. Use the page content—not a device label—to decide whether the existing threshold provides a comfortable transition. If it does not, edit the threshold in the one existing media query and check again.