Misaligned Elements on Home Page[Bug]:

[nihasinghania22]

Give a brief about the bug ✍️

Description - The home page of the "Dots & Boxes" application shows a misalignment of the UI elements. The instructions, input fields, and buttons are not correctly aligned, resulting in a disorganized and cluttered appearance.

What is the expected behavior? 🤔

Description - All UI elements should be neatly aligned, ensuring a clean and organized interface for users.

Provide step by step information reproduce the bug 📄

Description - Navigate to the home page of the "Dots & Boxes" application. Observe the alignment of the instructions, input fields for rows, columns, and players, as well as the buttons (START, RESET, Music Off).

CSS Adjustments: Ensure the container elements have proper width and margin settings. Use a flexbox or grid layout to align the elements properly.

HTML Structure: Verify the HTML structure to ensure elements are nested correctly within their parent containers.

Responsive Design: Ensure the page is responsive and that media queries are used to adjust the layout for different screen sizes.

Select program in which you are contributing

GSSoC24

Code of Conduct

• [X] I follow CONTRIBUTING GUIDELINE of this project.

[github-actions[bot]]

Hey @nihasinghania22! 👋

👉 Thanks for opening this issue. We appreciate your contribution and will look into it as soon as possible. 👉 Don’t forget to star our Dot-Box and Follow Us on GitHub 👉 Make sure you join our Discord, we have created separate channels for all projects

[nihasinghania22]

@ayush-t02 Could you please assign me this issue

[ayush-t02]

works completely fine for me