Skip to content

fix(landing): mobile responsive layout for screens under 768px#9

Open
reckoning89 wants to merge 1 commit into
iii123iii:mainfrom
reckoning89:responsive-fix
Open

fix(landing): mobile responsive layout for screens under 768px#9
reckoning89 wants to merge 1 commit into
iii123iii:mainfrom
reckoning89:responsive-fix

Conversation

@reckoning89

Copy link
Copy Markdown

Summary

  • Extracted landing page styles from inline <style> into frontend/src/pages/LandingPage.css
  • Added @media (max-width: 767px) rules to adapt nav, hero, toolkit grid, steps, CTA, and footer on mobile
  • Mobile improvements: centered hero copy, full-width CTA buttons, single-column tool cards, reduced section padding, compact typography
  • Desktop layout and styling preserved

Closes #3

Test plan

  • npm run build passes in frontend/
  • Chrome DevTools → Toggle device toolbar → iPhone SE (375px) and iPad Mini (768px)
  • Verify nav, hero buttons, tool cards, and footer stack correctly below 768px
  • Verify desktop layout unchanged at >= 768px

Extract landing page styles into LandingPage.css and add @media (max-width: 767px) rules for nav, hero, toolkit grid, CTA, and footer. Desktop layout unchanged.

Closes iii123iii#3

Co-authored-by: Cursor <cursoragent@cursor.com>
@reckoning89

Copy link
Copy Markdown
Author

Ready for review — closes #3 ($100 bounty)\n\nClosed duplicate PR #8; this is the canonical fix.\n\nChanges: @media (max-width: 768px) breakpoints, fluid typography, touch-friendly CTAs, no horizontal scroll at 320px.\n\nVerify:
pm run build + mobile viewport DevTools.\n\n8 competing PRs on this issue — happy to adjust per maintainer preference.

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.

Bug bounty 100 usd to whoever makes my landing page responsive for mobile

1 participant