Create a responsive application shell

Loading problem workspace…

Create a responsive application shell · UIHero

Create a responsive application shell

Lay out navigation, primary content, and a contextual rail across desktop, tablet, and mobile widths.

MediumCSS Layout

50 min0% acceptance

Description

Complete the CSS for a semantic application shell. Desktop uses three intentional regions, tablet reflows the contextual rail, mobile stacks content with usable navigation, and every width preserves readable focus and avoids overflow.

Requirements

Shell landmarks works deterministically for the documented normal, boundary, and repeated-use scenarios.
Desktop columns works deterministically for the documented normal, boundary, and repeated-use scenarios.
Tablet reflow works deterministically for the documented normal, boundary, and repeated-use scenarios.
Mobile stack works deterministically for the documented normal, boundary, and repeated-use scenarios.
Navigation sizing works deterministically for the documented normal, boundary, and repeated-use scenarios.
Content remains inside the viewport without unintended horizontal scrolling at every reference width.
Keyboard focus has a persistent, high-contrast indicator without causing layout shift.

Mobile stack

Input

Render at 375 CSS pixels

Expected output

Navigation, main content, and activity stack without horizontal scrolling

Explanation

Controls remain at least touch-friendly while content order stays meaningful.

Constraints

Use CSS Grid or Flexbox rather than absolute positioning
Support 375, 768, and 1440 pixel viewports
Do not hide primary navigation links

Hints

Hint 1

Define the desktop track contract before writing media queries.

Hint 2

Move the contextual rail below main content at tablet width instead of squeezing all three columns.

Hint 3

Use min-inline-size: 0 on grid children and allow navigation labels to wrap safely.

CSSgridresponsive design

Loading problem workspace…