Open DevTools → Toggle Device Toolbar (Ctrl+Shift+M) → try iPhone, iPad, various widths.
See the three-panel layout crammed on mobile — it's unusable. The toolbar is squished, canvas is tiny, settings panel overflows.
@media (max-width: 768px) {
.app-container {
flex-direction: column;
}
.toolbar {
flex-direction: row;
width: 100%;
height: auto;
overflow-x: auto;
}
.settings-panel {
width: 100%;
max-height: 40vh;
overflow-y: auto;
}
.tool-btn {
min-width: 44px;
min-height: 44px;
}
}
Test at each breakpoint and verify the layout adapts:
| Width | Device | Expected Layout |
|---|---|---|
| 320px | Small phone | Single column, horizontal toolbar |
| 480px | Large phone | Single column, larger touch targets |
| 768px | Tablet | Transition point — layout switches |
| 1024px | Laptop | Full three-panel layout |
Add a collapsible settings panel: hidden by default on mobile, toggle button to show.
This improves mobile UX by giving the canvas maximum screen space by default.
Small screens need slightly larger base font sizes for readability. Ensure labels, values, and headings are readable without zooming.
git switch -c design/PIXELCRAFT-006-responsive
# ... implement responsive → test on multiple sizes ...
git add src/styles/
git commit -m "Implement responsive layout for mobile (PIXELCRAFT-006)"
git push origin design/PIXELCRAFT-006-responsive
# PR → Review → Merge → Close ticket ✅
Adaptive systems respond to their environment.
Responsive web design adapts to screen size. But the same principle applies widely across engineering and nature.