Bug Fix for Premium Beans Responsive UI - Fixed the Cards moving out of frame

[CrystalFireSword]

The UI of the Premium Beans change was fixed to ensure that for almost all device sizes, the cards do not move out of the frame or get cut out.

Pull Request Template

Summary

In the previous version, the UI of the Premium Beans page worked well for the full-screen view of a laptop, but under a mobile phone's screen size or under split screen, the cards for Arabica Bliss and Robusta Robusta Roast on the left and the Espresso Elite and Colombian Charm on the right moved out of the frame, and were only half-visible as the pictures attached to the issue. This issue was fixed by adjusting media parameters to cater to different screen sizes, and changed to a single column after a certain screen size so that cards do not move out of frame.

Fixes #293

Type of Change

Please mark [X] for applicable items:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Other (please describe):

Testing

Please describe the tests you performed to verify your changes:

1. Inspected the page and adjusted the screen size to check for different screen sizes and ratios.
2. Opened the website in different browsers like Edge and Chrome and adjusted screen size.

(This is my first time making a pull request, please feel free point out to mistakes if there are any!)

Screenshots/Videos

Please attach relevant screenshots or videos demonstrating the changes.

1. FULL SCREEN SIZE
   

1.1 PAGE BEFORE MAKING THE CHANGE (with cards overflowing to the sides)

PAGES AFTER MAKING CHANGES:
2. Page after further screen size reduction:

3. Page Under half-screen split screen size:
   
   
   

4. Page under average mobile phone screen size:

Checklist

Please mark [X] for completed items:

• [ X] My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have updated the documentation accordingly
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
coffee-shop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 11, 2025 0:27am

[github-actions]

Thank you for your contribution! 🎉

PR Checklist

• Tests added/updated
• Documentation updated
• Changes follow coding standards
• Commit messages are clear

Next Steps

1. We will review your PR soon
2. Address any requested changes
3. Once approved, your PR will be merged

Need help? Check our Contributing Guide

Happy coding! 💻

[Mujtabaa07]

@CrystalFireSword its freeze , resolve the conflicts

[CrystalFireSword]

Does this mean I have resolved the conflicts? I am new to this, so kindly help! Thanks in advance! @Mujtabaa07

[Mujtabaa07]

🎉 Congratulations on Your Merged PR!

Thank you @CrystalFireSword for your contribution!

What's Next?

• 🌟 Consider contributing to other issues
• 📚 Check our Contributing Guidelines for more ways to help

Keep up the fantastic work! 🚀