Fix horizontal overflow on mobile viewports - #11
Conversation
Replace the showcase's bare `1fr` with `minmax(0, 1fr)` so the 400px TV mockup no longer stretches the row, and cap the fixed-px mockups at the card width below 960px. Drop the hero glow's `-4rem` side bleed, widening the gradient radius to 67% to keep its size.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. ℹ️ You can also turn on project coverage checks and project coverage reporting on Pull Request comment Thanks for integrating Codecov - We've got you covered ☂️ |
There was a problem hiding this comment.
Pull request overview
This PR adjusts the website’s responsive CSS to eliminate horizontal overflow on mobile viewports by making grid tracks and fixed-size 3D mockups shrinkable within their containers, and by preventing the hero glow from extending beyond the viewport width.
Changes:
- Constrain the hero glow pseudo-element to avoid horizontal side-bleed while preserving its visual size via a wider radial-gradient ellipse.
- Replace the mobile showcase single-column
1frgrid track withminmax(0, 1fr)to allow the column to shrink below min-content width. - Add mobile-only
min-width: 0/max-width: 100%constraints to the showcase visual and 3D mockup elements to prevent overflow.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Replace the showcase's bare
1frwithminmax(0, 1fr)so the 400px TV mockup no longer stretches the row, and cap the fixed-px mockups at the card width below 960px. Drop the hero glow's-4remside bleed, widening the gradient radius to 67% to keep its size.