Understand inheritance
Base values apply everywhere. Tablet and mobile values should override only what changes, so later base improvements continue to flow into smaller devices.
- An explicit device value wins at that device.
- Removing an override restores inheritance; it does not copy the current value.
- The inspector identifies whether each value is direct or inherited.
Responsive layout workflow
- Build the semantic order first; do not use visual reordering to repair inaccessible source order.
- Set maximum content width, padding and grid/flex behavior at the base size.
- Switch to tablet and mobile, then add the smallest necessary overrides.
- Use rulers, guides and snapping for alignment, then test at custom widths between presets.
Acceptance checks
Check long translations, zoom, keyboard focus, empty catalogue data and real images. Side-by-side preview helps comparison but does not replace testing the published route in a browser.
Avoid fixed heights for text-rich sections. Prefer natural flow, minimum sizes and container-aware grids.