What
When Claude Code builds web-page Artifacts, the prompt guiding the model now includes more detailed responsive-design instructions:
- Keep the page usable at widths as small as roughly 400px
- Keep 16px side margins using
padding-block(never a padding shorthand that zeroes it out) - Use relative units instead of fixed pixel sizes
- Let grids wrap or stack on narrow screens
- Cap the width of images and elements with a fixed aspect ratio
- Confine any horizontal scrolling to tables, diagrams, or code blocks, each in its own scrolling container, so the page body itself never scrolls sideways
Why
This should produce Artifacts that look right and stay usable on narrow screens and mobile-sized viewports, instead of overflowing or requiring awkward horizontal scrolling.