Task Description
The homepage hero section is currently breaking on mobile viewports (375px and 768px). The CTA button stack is overlapping, padding collapses incorrectly, and the headline wraps unevenly on small screens.
This task requires a full audit of the hero component across breakpoints. Ensure padding follows the design spec (24px mobile, 40px tablet), the CTA stack is preserved, and the headline transition is resolved using correct line-clamp values.
- Hero section renders correctly at 375px width
- CTA buttons stack vertically with correct spacing
- Headline uses correct line-height and wrapping
- Padding matches Figma spec at all breakpoints
- No overflow or scrollbar visible on mobile
Attachments
4 files- wireframes_v3.figFigma · 2.4 MB
- breakpoint_spec.pdfPDF · 840 KB
- hero_assets_export.zipZIP · 5.1 MB
- client_feedback.docxDOCX · 128 KB
Please ensure the mobile breakpoints follow the Figma specs exactly — the client reviewed the desktop version and was pleased. Focus on 375px and 768px viewports first.
I’ve updated the component library with the hover states. Pulling them now.
Confirmed — I’ll pick up the 375px breakpoint today. The 768px might need more work, flagging now.
Assigned Team
- FOFarida OseiLead DesignerOnline
- EOEmeka O.Project ManagerOnline
- YAYemi AdesanyaFrontend Dev
Deadline
Task Progress
- 375px breakpoint
- 768px breakpoint
- CTA button stack
- Headline wrap fix
- Client review pass