Responsive layout
Responsive layout adapts to available space, input methods, and user settings. It includes content behavior as well as breakpoints.
What it is
Responsive layout adapts to available space, input methods, and user settings. It includes content behavior as well as breakpoints.
Why it matters
A mobile chat needs room for the keyboard and composer, not just a narrower desktop layout.
Example
Use min-width: 0 on flexible children and overflow-wrap for long URLs so a message does not widen the viewport.
Technical detail
Dynamic viewport units such as dvh follow changing browser UI; provide a compatible fallback where needed.
When to use it
Test narrow screens, landscape, large text, and reduced motion with real content.
Go deeper
Sources
More in Web platform
Assembled from the ReLU.chat curated knowledge base. These explanations are concise on purpose; check the sources for anything important.