Title: Fix Mobile Responsiveness Issues on Donate PageDraft: Donation
This MR fixes mobile responsiveness issues on the Donate page. Currently, the layout is broken on smaller screens with overlapping elements, improper spacing, and distorted images. This change ensures a clean, responsive, and user-friendly UI across all mobile devices.
What does this MR do and why?
The Donate page had poor responsiveness, affecting usability for mobile users. Sections like Bank Transfer and UPI Payment were not properly aligned, and images appeared distorted.
To address this:
- A mobile-first responsive approach was implemented
- Layout issues were fixed using Flexbox/Grid
- Proper scaling and spacing were applied
This improves readability, usability, and overall user experience, especially for mobile users making donations.
Changes Made
- Updated Donate page layout for responsiveness
- Fixed alignment issues in "How to Donate" section
- Improved image scaling and responsiveness
- Adjusted padding, margins, and font sizes
- Added media queries for different screen sizes
Technical Details
Root Cause:
- Fixed widths and improper layout structure
- Missing responsive breakpoints
- Improper image handling
Fix Applied:
- Replaced fixed layouts with flexible layouts (Flexbox/Grid)
- Used
width: 100%,max-width, andobject-fitfor images - Added responsive breakpoints using media queries
Type of Change
-
🐛 Bug fix (non-breaking change that fixes an issue) -
✨ New feature (non-breaking change that adds functionality) -
💥 Breaking change -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
- Fixes #
Screenshots or Screen Recordings
| Before | After |
|---|---|
| Broken layout, overlapping UI | Clean responsive layout |
-
Verify:
- Layout is responsive
- No overlapping elements
- Images scale correctly
Testing Done
-
Manual testing completed -
Unit tests added/updated
Test Cases Covered:
| Scenario | Expected Result | Status |
|---|---|---|
| Mobile layout rendering | Proper alignment | |
| Image responsiveness | No distortion | |
| Text readability | Clear and spaced |
Code Quality Checklist
Code Standards
-
Code follows project conventions -
No console.log() or debug statements -
No unused code -
No duplicate code -
i18n check passed -
ESLint and Prettier checks pass
React Best Practices
-
Components follow single responsibility -
Proper hook usage -
Optimized rendering -
Clean event handling
Component Patterns
-
Tailwind CSS used properly -
Responsive design implemented -
Accessibility considered
API & Data Fetching
-
Not applicable (UI-only changes)
Error Handling
-
No UI breaking errors -
Stable rendering across devices
Documentation
-
Not required
Known Limitations / Technical Debt
- Minor UI refinements may still be needed for tablet view
- Future improvement: add responsive testing automation
Additional Notes
- Focus was strictly on mobile responsiveness
- Desktop layout remains unchanged
- No backend changes involved
*After
Edited by DALIBOINA SATISH