VCEDC Mobile Responsiveness Issues
Three mobile responsiveness bugs were identified during pre-launch review of the VCEDC website, collectively blocking the production push until resolved. The issues were caught by dragging the browser window to a narrow width and testing on an actual mobile device.
Bugs Identified
1. Hero Image Overflow
The main hero image does not scale responsively on smaller screens — it overflows its container rather than constraining to the viewport width. This was previously working and appears to have regressed after a recent image update.
2. Social Icon Stacking
Social icons in the header or footer stack incorrectly at narrow breakpoints, producing a broken layout rather than collapsing gracefully (e.g., into a row or a hamburger-style menu).
3. Button Misalignment
Buttons stack or misalign at small screen widths rather than reflow cleanly.
Impact
These bugs were sufficient to place the launch on hold. The client (Tracy/Kathy) had a contractual expectation of a same-day launch, but the team agreed that shipping with visible mobile layout breakage was not acceptable. See [1] and [2] for the full launch context.
Recommended Fix Approach
Mark suggested having a second developer — Eshock or Jeff — review the site fresh rather than having the original developer continue to debug their own work. The rationale: when you build something yourself, blind spots make self-diagnosis harder.
"Sometimes when you do something yourself, it's hard to fix it because you made it so you can't even see. But maybe if you had Eshock or Jeff take a look at it…" — Mark Hope
Testing Notes
- Browser drag-to-narrow is a quick first check but does not always match real device behavior.
- Melissa confirmed the bugs were visible on an actual mobile device, not just the browser resize simulation.
- The staging site should be frozen (no edits by Aki) before any fix is verified and pushed to production. See [2] for the staging freeze protocol.
Status
- [ ] Hero image overflow — assigned to dev review (Eshock or Jeff)
- [ ] Social icon stacking — assigned to dev review
- [ ] Button misalignment — assigned to dev review
- [ ] Melissa to coordinate fix verification before re-scheduling DNS migration
Related
- [2]
- [3]
- [1]