Skip to content

feat(ui): add mobile-first responsive framework for improved mobile UX#157

Open
PATTASWAMY-VISHWAK-YASASHREE wants to merge 2 commits intoarm-university:mainfrom
PATTASWAMY-VISHWAK-YASASHREE:mobile_ui_fix
Open

feat(ui): add mobile-first responsive framework for improved mobile UX#157
PATTASWAMY-VISHWAK-YASASHREE wants to merge 2 commits intoarm-university:mainfrom
PATTASWAMY-VISHWAK-YASASHREE:mobile_ui_fix

Conversation

@PATTASWAMY-VISHWAK-YASASHREE
Copy link

@PATTASWAMY-VISHWAK-YASASHREE PATTASWAMY-VISHWAK-YASASHREE commented Jan 24, 2026

  • Create _responsive.scss partial with comprehensive mobile breakpoints
  • Fix hero section text bleeding on small screens (320px-768px)
  • Implement fluid typography using clamp() for headings
  • Add footer flex-wrap for partner logo layout
  • Convert fixed pixel spacing to CSS custom properties
  • Prevent horizontal scroll with global overflow-x: hidden
  • fluid responsive SCSS framework (_responsive.scss) that uses CSS custom properties, clamp(), and viewport units to scale smoothly across all device sizes

Fixes #109

Before submitting a pull request for a project submission, please review the instructions under How to submit your project.

  • [ +] I have reviewed the project submission instructions

Please do not include any confidential information in your contribution. Additionally if you are affiliated with an academic institution, please ensure you have the right to share your material.

  • [ +] I have checked my contribution for confidential information

By submitting this pull request, I confirm that you can promote and share the your referenced material.

- Create _responsive.scss partial with comprehensive mobile breakpoints
- Fix hero section text bleeding on small screens (320px-768px)
- Implement fluid typography using clamp() for headings
- Add footer flex-wrap for partner logo layout
- Convert fixed pixel spacing to CSS custom properties
- Prevent horizontal scroll with global overflow-x: hidden

Fixes arm-university#109
@PATTASWAMY-VISHWAK-YASASHREE
Copy link
Author

PATTASWAMY-VISHWAK-YASASHREE commented Jan 24, 2026

the mobile ui has been tested in polypane software here are some screenshots
can get more mobile variants if asked
image

image

- Create _responsive.scss with CSS custom properties
- Use clamp() for fluid typography (--text-xs to --text-5xl)
- Implement fluid spacing system (--space-3xs to --space-3xl)
- Fix hero text bleeding and footer logo wrapping
- Remove hardcoded breakpoints for seamless 280px-2560px+ scaling

Fixes arm-university#109
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.

Improve Mobile UI

1 participant