Fix home cards alignement

[Marchand-Nicolas]

Description 📹

In the /quests route, the "Boost Quests" and "Reward Quests" cards are currently not displayed horizontally on large screens. According to the Figma design, they should be aligned side-by-side to enhance the UI layout on wider viewports.
https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5827-17656&t=gfqkwecTqFXdffzF-0

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:

• Modify the layout CSS to use flex or grid display for the quest cards on large screens.
• Ensure that media queries are correctly set to apply horizontal layout for large screen sizes (e.g., min-width: 1024px).
• Confirm the spacing and alignment match the Figma design.

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: Align Boost and Reward Quest cards horizontally on large screens"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.

• Timeframe: Complete the task within 3 business days.

• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].

• Review Process:

  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.

• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[sajalbnl]

Is this issue still available?.I want to work on this issue.As i am frond end developer with 2 years of experience .
I can handle it very well. I will deliver my work in 1 day.

[Emmy123222]

May I be assigned to this?

[webcodeed]

i am a frontend developer and i would like to take on this issue

[Franker24]

Is it okay if I take this?

[SkyWarrior123]

May I take care of this?

[SudiptaPaul-31]

Would love to work on this task if assigned

[perpetual-cosmos]

I’d love to explore this task and give it a positive go! The UI improvement for aligning the Boost and Reward Quest cards on large screens seems like a clean and impactful fix.

I'm comfortable working with responsive layouts using CSS Grid/Flexbox and have experience translating Figma designs into clean, accurate UI implementations. I'd approach this with careful attention to alignment, spacing, and responsiveness.

Let me know if it’s okay for me to start exploring this issue!

[Sulaimonyusuf123]

I’ve worked on several frontend projects where aligning components to match design files like Figma was an important part of the job. I’m comfortable working with CSS, Flexbox, and Grid to adjust layouts and make sure everything looks clean and responsive.

I want to fix this because consistent layout and proper alignment are key to a professional user experience. If something looks off, it can affect how users perceive the whole app.

To fix it, I’ll inspect the section using browser dev tools and compare it to the Figma design. I’ll check for any missing or incorrect styles—like misused flex alignment, padding, or margin issues—and adjust them so the text and cards are centered properly. I’ll also make sure it looks good on different screen sizes.