[BUG] UI Layout Misalignment and Cluttered Design

[13Sharad]

Description

The website's UI layout appears misaligned, with certain elements (like the score, life indicators, and game interface) overlapping or not positioned correctly. The visual clutter from snowflakes and other elements makes it difficult to navigate or play the game smoothly. I tried adjusting the screen size, resolution, and layout, but the issue persists across different devices. Even changing the game settings did not resolve the UI alignment problems.

Screenshots

Any additional information?

The issue seems to be more prominent on smaller screens or devices with lower resolutions. It could be related to the responsiveness of the UI design or conflicts between certain CSS elements (e.g., z-index, flex, or grid settings). Ensuring proper scaling and alignment across different screen sizes might help resolve this. Additionally, the snowflake effect, while visually appealing, may be contributing to the visual clutter and could be optimized or minimized for better clarity during gameplay.

What browser are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

👋 Thank you @13Sharad for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

[Iampratyush004]

@YadavAkhileshh this issue is resolved in my PR #344 kidnly review and merge so that it is becoming easy to make improvements for anyone further. I will change the logo in the subsequent issue .please cooperate and understand the need to it. I have attached the old ui and new ui screenshot along with the PR #344 . hoping for the tags : hacktoberfest-accepted, gssoc extd and level2 in both my issue #277 and PR #344 Hoping for a positive response on this. Thanks Regards