[Enhancement] Make UI Responsive for All Devices

[abhijeetnishal]

Description:

The current UI of our URL Shortener application is not fully responsive, resulting in a poor user experience on devices with different screen sizes and orientations. As a result, we need to ensure that our application's UI is adaptable and looks great on all devices, including desktops, laptops, tablets, and mobile phones.

Requirements:

To achieve this, we need to make the following changes:

• Media Queries: Implement media queries using Tailwind CSS to define different styles for different screen sizes and orientations.
• Component Adjustments: Review and adjust individual components (e.g., buttons, forms, cards) to ensure they scale and adapt correctly on different devices.
• Typography: Ensure that typography is responsive, with font sizes and line heights adjusting according to screen size.
• Image Handling: Optimize image handling to ensure that images are displayed correctly and do not break the layout on different devices.

Technical Details:

• Our application is built using Next.js with TypeScript.
• We are using Tailwind CSS for styling.

Expected Outcome:

After completing this task, the URL Shortener application should have a fully responsive UI that adapts to different devices and screen sizes, providing an optimal user experience.

Expected deadline:

It will take 1-2 days at max.

[gupta-ritik]

@abhijeetnishal assign this issues for resolve to me

[abhijeetnishal]

Great @gupta-ritik, I am assigning this issue to you now.

[gupta-ritik]

Thanks for assigning .

…

On Sun, May 12, 2024, 01:39 Abhijeet Kumar ***@***.***> wrote: Assigned #44 <#44> to @gupta-ritik <https://github.com/gupta-ritik>. — Reply to this email directly, view it on GitHub <#44 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6I6S4GXJ2CAYAR664FCR53ZBZ3INAVCNFSM6AAAAABHSFK4NCVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJSG43TOMJSGMZDINY> . You are receiving this because you were assigned.Message ID: ***@***.***>

[Nehakumari1208]

Assign this to me

[abhijeetnishal]

Assign this to me

Hey @Nehakumari1208, this issue is already assigned to @gupta-ritik. Work on other issues good luck.

[prajna321]

@abhijeetnishal
Please assign me this issue! Would love to work on it.

[gupta-ritik]

@abhijeetnishal Hello Dear Sir

, i facing a problem running server it showing some error.
I attached the error issue in the image and how to fix this issues please tell me

[abhijeetnishal]

@abhijeetnishal Hello Dear Sir , i facing a problem running server it showing some error. I attached the error issue in the image and how to fix this issues please tell me

Hey @gupta-ritik, for running client run: npm i command in client director.

If you are getting error then remove node_modules and .next folder and then run npm i command.

[abhijeetnishal]

Hey @gupta-ritik, what's the progress, are you working on this?

[gupta-ritik]

i still facing above mentioned issues

[abhijeetnishal]

Try to clone the project again and install and run it will run else I think it will system level issue.

Try to debug this issue

[abhijeetnishal]

Hey @hrishabhpatel09, are you interested in this issue as you asked in issue #72

[hrishabhpatel09]

sure @abhijeetnishal i would love to contribute on this issue.