Closed fricoben closed 1 month ago
Hi @fricoben please can I work on this? I’m a frontend developer and I’m good with tailwind.
Hey can I work on this ? I will...
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.
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)Plan the Responsive Design: You want to set the max-w
property to:
Apply Tailwind Utility Classes:
max-w
class for the large screen setting.sm:max-w-[90%]
to set the maximum width to 90% on small screens.md:max-w-[80%]
to set the maximum width to 80% on medium screens.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
Can I work on this @fricoben
Can I work on this as my first contribution? @fricoben
Hello @fricoben can I address this issue
I am applying to this issue via OnlyDust platform.
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
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>
I am applying to this issue via OnlyDust platform.
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.
Given my background and expertise, I can ensure the
element is optimized for mobile view using Tailwind CSS.
questDetails.tsx
file: Locate the file in your project directory.<p>
element:<p className="text-center max-w-[50vw]"> {quest.additional_desc} </p>
<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
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
Adding @thiagoulloa on this one
Thank you @fricoben, I will start working on it and update you as soon as possible
I just made the pull request. (The button to add the "ready for review" label is not appearing for some reason)
Description
Currently, the
max-w
property of the<p>
element inquestDetails.tsx
file is set to50vw
, which is not optimized for mobile view. We need to update this property to be80%
or90%
on mobile devices using Tailwind CSS.Steps to Fix
questDetails.tsx
file.