Max-width text on `questDetail.tsx`

[fricoben]

Description

Currently, the max-w property of the <p> element in questDetails.tsx file is set to 50vw, which is not optimized for mobile view. We need to update this property to be 80% or 90% on mobile devices using Tailwind CSS.

Steps to Fix

1. Open the questDetails.tsx file.
2. Locate the following code:

   <p className="text-center max-w-[50vw]">
    {quest.additional_desc}
   </p>

3. Fix this making the width 80 or 90% on mobile using tailwind

[Iwueseiter]

Hi @fricoben please can I work on this? I’m a frontend developer and I’m good with tailwind.

[EmmanuelAR]

Hey can I work on this ? I will...

1. Understand Tailwind CSS: Tailwind CSS provides utility classes that can be used to style elements responsively. The max-w property sets the maximum width of an element.

2. Identify the Responsive Breakpoints: Tailwind CSS uses predefined breakpoints for different screen sizes:

   • sm for small screens (640px and up)
   • md for medium screens (768px and up)
   • lg for large screens (1024px and up)
   • xl for extra-large screens (1280px and up)

3. Plan the Responsive Design: You want to set the max-w property to:

   • 50vw for large screens (default).
   • 90% for mobile devices (small screens).
   • 80% for medium screens.

4. Apply Tailwind Utility Classes:

   • Use the default max-w class for the large screen setting.
   • Add sm:max-w-[90%] to set the maximum width to 90% on small screens.
   • Add md:max-w-[80%] to set the maximum width to 80% on medium screens.

5. Update Your Component: Locate the <p> element in your questDetails.tsx file and update its class attribute to include the appropriate Tailwind CSS utility classes as planned.

@fricoben

[raizo07]

Can I work on this @fricoben

[thiagoulloa]

Can I work on this as my first contribution? @fricoben

[MullerTheScientist]

Hello @fricoben can I address this issue

[devcollinss]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

With 3 years of solid experience in JavaScript, TypeScript, and React, I have developed a strong proficiency in creating intuitive and visually appealing user interfaces. My work on various projects, including browser extensions, has provided me with valuable insights into enhancing user experience and ensuring responsiveness across different devices. Here is my github profile https://github.com/devcollinss https://app.onlydust.com/u/devcollinss

How I plan on tackling this issue

I will locate the file at components > quests > questDetails.tsx

The update the code

<Typography
   type={TEXT_TYPE.BODY_DEFAULT}
   className="text-center max-w-[90%] sm:max-w-[80%] md:max-w-[50vw]"
>
   {quest.additional_desc}
</Typography>

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @fricoben,

I am Benjamin, a JavaScript developer with 3 years of experience specializing in TypeScript, Next.js, and Tailwind CSS. I have experience with Tailwind CSS for styling, ensuring responsive and accessible designs across various devices. I have a track record of handling complex frontend-related issues and have contributed to various projects on OnlyDust, enhancing their frontends.

How I plan on tackling this issue

Given my background and expertise, I can ensure the

element is optimized for mobile view using Tailwind CSS.

Steps to Fix

• I will open the questDetails.tsx file: Locate the file in your project directory.
• Locate the Code: Find the specific code block for the <p> element:

<p className="text-center max-w-[50vw]"> {quest.additional_desc} </p>

• Update the class to use Tailwind's responsive utilities. I can use the sm, md, lg, and other prefixes to apply different styles for different screen sizes :

<p className="text-center max-w-[90%] md:max-w-[50vw]"> {quest.additional_desc} </p>

This sets the max-w property to 90% on mobile devices (screens less than 640px) and retains 50vw for medium and larger screens (screens 640px and above) and ensures that the max-w property is optimized for mobile view while maintaining the desired width on larger screens.

I hope this issue get assigned to me and i will do justice to it. Thanks

[petersdt]

hello @fricoben am a frontend dev with some level of experience with frontend framework and I would like to make this my first contribution to the starknet quest project

[fricoben]

Adding @thiagoulloa on this one

[thiagoulloa]

Thank you @fricoben, I will start working on it and update you as soon as possible

[thiagoulloa]

I just made the pull request. (The button to add the "ready for review" label is not appearing for some reason)