apu52
Improve Mobile Responsiveness & UI Consistency in Destination Cards Section
While browsing the Travel Website on smaller screens (mobile devices), I noticed the following issues in the "Top Deals" and "Popular Destinations" sections:
1.Image Overflow: Images inside destination cards are not scaling properly on very small screen widths, causing horizontal scrolling.
2.Text Wrapping Issue: Destination names and prices overflow outside the card when text is long.
3.Inconsistent Padding: Some cards have extra space below the image compared to others.
Proposed Solution:
1.Use responsive CSS units (max-width: 100%, object-fit: cover) for images.
2.Ensure proper text wrapping and ellipsis for long text using CSS (text-overflow: ellipsis).
3.Standardize padding and margin in card layout for uniform appearance.
Additional Benefit:
1.Fixing this will improve mobile usability and make the UI more consistent for all users.
Suggested Labels: Enhancement , good first issue UI/UX , responsive design
Hi @apu52 sir, I would like to work on this issue as part of my contribution. Could you please assign this issue to me? Thank you!
👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hi, I am a GSSoC’25 contributor with experience in frontend development and responsive UI design.
I have worked with technologies like HTML, CSS, JavaScript, React, and Tailwind CSS, and I would love to work on this issue.
I can improve the destination cards by fixing image scaling, handling text wrapping with ellipsis, and standardizing padding/margins to ensure a clean and consistent mobile experience.
Could you please assign this issue to me?
Thank you! 🙌
@apuapu52 I would like to work on this issue.Can you please assign this to me
