Skip to content

fix: replace 100vw with 100% in contact form mobile media query#5

Open
jaredgoldman wants to merge 1 commit intomainfrom
worktree-agent-a502c8268ca0a6fc7
Open

fix: replace 100vw with 100% in contact form mobile media query#5
jaredgoldman wants to merge 1 commit intomainfrom
worktree-agent-a502c8268ca0a6fc7

Conversation

@jaredgoldman
Copy link
Copy Markdown
Owner

Summary

  • In the @media only screen and (max-width: 480px) block, .form-container and .contact-form were using width: 100vw; max-width: 100vw
  • 100vw includes the scrollbar width on devices that show scrollbars, causing horizontal overflow and an unwanted horizontal scrollbar on mobile
  • Changed both selectors to width: 100%; max-width: 100%; box-sizing: border-box which respects the parent's available space correctly

Test plan

  • pnpm run css compiles without errors (only pre-existing @import deprecation warnings)
  • Browser verification: confirm no horizontal scrollbar on mobile viewports at ≤480px on the contact page

🤖 Generated with Claude Code

Using 100vw includes scrollbar width, causing horizontal overflow on
mobile. Switching to 100% respects the parent's available space without
the overflow issue, consistent with how the base styles already work.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 5, 2026

Deploy Preview for jared-goldman-portfolio ready!

Name Link
🔨 Latest commit cb8cafc
🔍 Latest deploy log https://app.netlify.com/projects/jared-goldman-portfolio/deploys/69f97d1764fe020008383287
😎 Deploy Preview https://deploy-preview-5--jared-goldman-portfolio.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant