Make All Pages Mobile Responsive

[yuvraj-rathod-1202]

🧩 Feature / Task

Ensure that all pages of the application are fully mobile-responsive. This involves using media queries and/or a mobile-first CSS approach to provide an optimal viewing and interaction experience across various screen sizes and devices.

---

✅ Acceptance Criteria

• All major pages (index.html, login.html, signup.html, dashboard.html, upload.html, profile.html) display correctly on mobile devices (e.g., smartphones, tablets).
• Content is readable and elements are not overflowing.
• Navigation elements adapt for smaller screens (e.g., hamburger menu).
• Forms, tables, and images scale appropriately.
• Touch targets are adequately sized for mobile interaction.

---

🚧 Steps To Do

1. Create or update styles/responsive.css.
2. Add a viewport meta tag to all HTML files: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
3. Adopt a mobile-first approach by designing for small screens first and then using min-width media queries for larger screens.
4. Review each page and component:
   • Layouts: Use Flexbox or Grid for flexible layouts.
   • Typography: Adjust font sizes for different screen widths.
   • Images: Use max-width: 100% for responsive images.
   • Navigation: Implement a collapsible navigation menu (e.g., hamburger menu) for mobile.
   • Forms: Ensure form inputs and buttons are touch-friendly.
5. Test responsiveness using browser developer tools (device mode) and on actual mobile devices.

---

📁 Related Files / Areas

• public/*.html (all HTML files)
• styles/responsive.css
• styles/global.css (and other component-specific CSS files)

---

🧩 Priority

Priority: 🟡 Medium

---

🔗 Dependencies

None

---

🖼️ Reference

• MDN Media Queries documentation
• Mobile-first design principles