Responsive Design Test Page
Viewport Information
Navigation Test
✓ Check that navigation menu collapses to hamburger menu on mobile
✓ Verify hamburger icon is visible and clickable on small screens
✓ Ensure menu items are readable and properly spaced
Homepage Hero Test
✓ Hero title should scale down on mobile (2.5rem → 1.5rem)
✓ CTA buttons should stack vertically on mobile
✓ "What I Do" grid should become single column on mobile
Feature Rows Test
✓ Feature rows should stack vertically on mobile
✓ Images should display full width on mobile
✓ Text should be left-aligned (not right-aligned) on mobile
Writing Hub Test
✓ Navigation tabs should wrap properly on mobile
✓ Writing cards should display in single column on mobile
✓ Tab text should be readable at smaller sizes
Project Grid Test
✓ Project cards should display in single column on mobile
✓ Card images should maintain aspect ratio
✓ Technology tags should wrap properly
Typography Test
Heading 1 - Should scale on mobile
Heading 2 - Should scale on mobile
Heading 3 - Should scale on mobile
Body text should remain readable at 0.95rem on mobile devices. Line height should be 1.6 for optimal readability.
Image Test
✓ Images should be responsive and not overflow container
Test Instructions
- Resize your browser window to different widths
- Test on actual mobile devices (phone and tablet)
- Verify all checkmarks above are satisfied
- Check that no horizontal scrolling occurs
- Ensure all text is readable without zooming
- Verify touch targets are at least 44x44px