search

IraSoro / peri

The period tracker app
https://irasoro.github.io/peri/
34 stars 28 forks source link

Design the Whole UI and Make it Responsive for Mobile, Tablet, and Computer Screens #294

Closed AnkitLuhar closed 1 month ago

AnkitLuhar commented 1 month ago

Is your feature request related to a problem? Please describe.

The current design does not adapt well across different screen sizes (mobile, tablet, and computer). This results in misaligned elements, inconsistent styling, and a poor user experience, especially when switching between devices.

Describe the solution you'd like I would like a complete redesign of the webpage UI that ensures responsiveness for all screen sizes. The solution should include:

1>Mobile: Ensure layouts are stacked and touch-friendly, with proper padding and optimized images.

2>Tablet: Provide a balanced design, with appropriate scaling of elements like buttons, images, and text.

3>Computer: Maintain a clean layout, taking advantage of larger screen space with well-aligned components and optimized content display.

The design should ensure consistency across all devices, with elements like navigation, buttons, and content flowing properly without overlap or misalignment.

Describe alternatives you've considered

1>Using pre-built responsive frameworks such as Bootstrap or TailwindCSS for rapid design fixes.

2>Only fixing specific parts of the design for each screen size, but this might lead to inconsistent UX.

Additional context here is the screenshot of the current webpage: Screenshot (928)

Assign the issue under the Hacktoberfest2024.

AnkitLuhar commented 1 month ago

@IraSoro kindly assign the issue under the Hacktoberfest2024.

IraSoro commented 1 month ago

Hello, @AnkitLuhar! Thank you for your interest in our project!

We are trying to create an adaptive interface. But we will not be able to test on all devices. Thank you for noticing the bug! Could you please create an issue using the "Bug report" template and provide more detailed information there? Once we receive the information we need, we will try to fix it.