search

lennis-dev / hackit

This is a simple web application that allows users to try and solve a series of challenges. The challenges are designed to test the user's knowledge of web security and programming. The application is written in PHP.
https://hackit.lennis.dev/
GNU Affero General Public License v3.0
5 stars 3 forks source link

[BUG] Website is Not Responsive #17

Open mohit-1710 opened 1 week ago

mohit-1710 commented 1 week ago

Is there an existing issue for this?

Current Behavior

Description:

The website is not responsive on various screen sizes, particularly on mobile devices. Some of the elements are either misaligned or overflow outside the viewport.

Expected Behavior

Expected Behavior:

The website should adapt to different screen sizes seamlessly, with all elements correctly aligned and functional on smaller screens.

Actual Behavior:

image

Steps To Reproduce

Steps to Reproduce:

  1. Open the website on a mobile device or use the browser's developer tools to simulate smaller screen sizes.
  2. Observe the layout of the webpage.

Environment

- OS:windows 11 
- Browser:chrome

Anything else?

Possible Fix:

Consider implementing CSS media queries or using a responsive framework (e.g., Bootstrap, Tailwind) to ensure that the layout adjusts properly on smaller screens.

mohit-1710 commented 1 week ago

@lennis-dev please assign this issue to me .

lennis-dev commented 6 days ago

I am aware of the problem, and no question responsive design is important. however, I have already worked on it myself, but then quickly left it because you can not enter the code on mobile devices (touch input), because the script I wrote only registers onkeypress events to enter the code.

But you are welcome to work on it, I assign you.

mohit-1710 commented 6 days ago

Thank you for assigning me this issue! I appreciate the opportunity to help out.

I can definitely work on making the website touch-friendly for mobile devices. If that sounds good to you, I’ll raise another issue specifically for that.

Looking forward to your thoughts!

Best, Mohit

lennis-dev commented 5 days ago

Alternatively, we could use media queries to create a div indicating that Hackit is not intended for mobile devices, and that it is difficult to access debugging tools or source code on a mobile device.