Improve Mobile Responsiveness

shuklamaneesh23 commented 1 month ago

Description:

Currently, the CF Helper application does not provide an optimal user experience on mobile devices. Various components and layouts appear misaligned or improperly sized, which affects usability and accessibility for users on smaller screens.

Steps to Reproduce:

Open the CF Helper application on a mobile device or resize the browser window to a smaller width.
Navigate through different pages and sections of the application (e.g., problem submission, results).
Observe the layout, font sizes, button sizes, and overall responsiveness of elements.

Expected Behavior: The application should dynamically adjust its layout and styling to provide a seamless experience on mobile devices. All elements should be readable and accessible without excessive scrolling or zooming.

Actual Behavior:

Elements are overflowing or misaligned.
Font sizes are too small to read comfortably.
Buttons and input fields are difficult to interact with.

Proposed Solution:

Implement responsive design techniques using CSS media queries to adjust styles based on screen size.
Ensure that all components, including buttons, text fields, and images, are appropriately sized and positioned for mobile views.
Test across multiple devices and screen sizes to confirm that the application maintains usability and aesthetics.

sidhanshamil commented 1 month ago

I would like to work on this

shuklamaneesh23 commented 1 month ago

@sidhanshamil ,I am assigning this to you.Please make sure to read the contributing.md in order to make a good PR. Thanks!

sidhanshamil commented 1 month ago

Thanks for assigning it to me, @shuklamaneesh23 ! I'll start working on it ASAP

dev15Aditya commented 1 month ago

Hey @shuklamaneesh23 👋🏼 I was trying to make it responsive. I have made it almost everything responsive, Just need to test but I am getting 500 (Failed to scrap website). Can you help me out.

shuklamaneesh23 commented 1 month ago

@dev15Aditya, please focus on making the home page responsive for now and avoid scraping the submissions. If you still want to proceed with that, make sure to pull the latest commits from the remote, as I’ve merged some PRs. Once you've done that, you can continue.

If you still face any issue, just ping me up!

shuklamaneesh23 commented 1 month ago

Closing this in favor of PR #18. It seems that the issue has already been resolved by that PR. Apologies for the confusion, and thank you for your understanding!

shuklamaneesh23 / cf_helper

Improve Mobile Responsiveness #2