Design for Narrow Screens and Keyboard Use
Combine flexible dimensions with visible focus and careful breakpoints.
By BizAIPro Learning · Prerequisites: Arrange Cards with Flexible Layouts
What you will learn
- Start with a narrow layout
- Choose a breakpoint based on content
- Keep focus visible
Start with a usable default
The default layout should work when little horizontal space is available. Increase complexity only when the content benefits from more columns. A media query is a condition, not a model-specific phone detector. Resize slowly and choose the point where the content needs a different arrangement.
Choose flexible limits
A grid with minmax(0, 1fr) columns can divide available space while allowing children to shrink. A minimum track width that exceeds the viewport can cause overflow. Test long headings, translated text and browser zoom instead of verifying only your own short sample.
Preserve keyboard feedback
Interactive controls need a visible focus indicator. :focus-visible is useful when showing a clear outline for keyboard navigation. Do not remove outlines without replacing them. Focus style must remain visible against the surrounding surface and must not be clipped by a parent with overflow hidden.
Project review
Build the service-card project using the earlier HTML structure. Review it at 320px, 768px and a wider window, then zoom in. Follow every link using only the keyboard. Write down any clipped text, confusing order or overlap and fix the underlying layout rule. A screenshot of one viewport is not a complete accessibility audit.
Read the example
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
a:focus-visible { outline: 3px solid #21499b; outline-offset: 3px; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Line-by-line explanation
- The base layout is single-column.
- The media query adds columns when space is available.
- The focus rule makes keyboard location visible.
Expected output
One column by default, two columns at 48rem, with a visible keyboard focus outline.
Common mistakes to avoid
- Removing all outlines
- Choosing breakpoints only from device names
- Testing only short placeholder text
Make a change. See what happens.
HTML/CSS renders in a script-free preview. JavaScript runs in a separate, time-limited console worker with network access blocked. DOM scripting and package imports are not supported. Browser memory limits still depend on your device.
Page preview
Render your code to see the page.
Preserve keyboard focus
Write an a:focus-visible rule with outline: 3px solid #21499b and outline-offset: 3px.
What should you do before removing a default focus outline?
Summary & next step
- Can you now start with a narrow layout?
- Can you now choose a breakpoint based on content?
- Can you now keep focus visible?
Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.