Skip to content

feat: Implement responsive design for mobile across all pages - #98

Open
AliMahmoudDev wants to merge 1 commit into
deepsonK:mainfrom
AliMahmoudDev:feat/responsive-design-mobile
Open

AliMahmoudDev wants to merge 1 commit into
deepsonK:mainfrom
AliMahmoudDev:feat/responsive-design-mobile

Conversation

@AliMahmoudDev

Copy link
Copy Markdown

Summary

This PR implements comprehensive responsive design for mobile devices across all pages (Closes #62).

Navigation (Layout.css)

  • Stack nav menu vertically on mobile with full-width links
  • Center logo and navigation links on small screens
  • Full-width login button on mobile for better touch targets
  • Adjust footer links to stack vertically with proper spacing
  • Add 480px breakpoint for extra small screens

Students Page (Students.css)

  • Reduce page padding on mobile (2rem → 1rem → 0.75rem)
  • Scale down heading sizes progressively
  • Stack search and filter controls vertically
  • Reduce table cell padding and font size on small screens
  • Make delete buttons smaller on mobile
  • Full-width "Add New Student" button on mobile

Courses Page (Courses.css)

  • Switch to single-column grid layout on mobile
  • Reduce card padding for mobile
  • Stack course action buttons vertically
  • Full-width action buttons for better touch targets
  • Add 480px breakpoint for extra small screens

Home Page (Home.css)

  • Scale hero section padding and font sizes for mobile
  • Reduce button padding and make full-width on 480px
  • Switch announcement and feature grids to single column
  • Adjust section padding on all breakpoints

Breakpoints

  • 768px: Tablet and below — main responsive adjustments
  • 480px: Extra small phones — further size reductions

- Add comprehensive mobile responsive styles for navigation (768px and 480px breakpoints)
- Stack nav menu vertically with full-width links on mobile
- Add responsive styles for students page (padding, font sizes, table cells)
- Add responsive styles for courses page (single column grid, stacked buttons)
- Add responsive styles for home page (hero, announcements, features)
- Add 480px breakpoint for extra small screens across all pages
- Full-width buttons on mobile for better touch targets
- Reduce font sizes and padding proportionally on smaller screens
- Fix course actions to stack vertically on mobile

Closes deepsonK#62
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.

Implement responsive design for mobile

1 participant