Quick summary
A responsive layout note about a page that looked fine on desktop but started overflowing and stacking badly on smaller screens.
The problem
The desktop layout hid the issue, but below tablet width the page had text wrapping, image sizing, and spacing rules that pushed content outside the viewport.
What I checked
- Responsive breakpoints from desktop down to narrow mobile
- Hero layout rules
- Flex and grid behavior
- Image sizing and max-width rules
- Horizontal overflow in browser dev tools
What I changed
- Adjusted the breakpoint where the columns collapse
- Added safer width constraints for images and content blocks
- Reduced mobile spacing in the affected section
- Retested the page across several viewport widths
Result
The page stacked cleanly on mobile and no longer forced side scrolling or crowded content blocks.
What I'd watch next
- Future image swaps that ignore the mobile size constraints
- New section copy that creates long unbroken lines
- Builder or theme updates that override the responsive rules