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