Skip to content
Submitted 3 months ago

Astro framework with Tailwind CSS, Vue islands, and MongoDB backend

#astro#tailwind-css#vue#mongodb
SmartAce•290
@Smart-Ace-Designs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This challenge took me a long time and I shelved it for several months. But I eventually got back on track and gave it another go.

What challenges did you encounter, and how did you overcome them?

CSS is a struggle, in terms of spacing and layout. The syntax is easy but trying to figure out how to match the spacing and layout from a picture to code is a problem. The JavaScript, for the most part, comes easy for me. CSS...not so much.

What specific areas of your project would you like help with?

My CSS is a mess. Probably needs some cleanup and elimination of unused or redundant styling.

Community feedback

  • Jay Khatri•4,230
    @khatri2002Posted 3 months ago

    Hi @Smart-Ace-Designs!

    The developed solution looks great! Excellent work so far!

    Suggestions for Improvement:

    1. Responsive Padding Adjustments:

    While the responsiveness is handled very well overall, on smaller mobile resolutions (e.g., width: 375px), the cards appear slightly shrunk. This happens because of the excessive padding applied to the grid container with these Tailwind classes:

    px-20 py-20 md:px-32 lg:px-36

    To fix this issue, consider adding a breakpoint for smaller devices (like sm) and adjust the padding for better usability:

    px-8 sm:px-20 py-8 sm:py-20 md:px-32 lg:px-36

    This way, px-8 and py-8 will apply to smaller resolutions, ensuring the cards look better and more proportional.

    2. Add Hover Effects:

    Hover effects are a great way to enhance user experience and make the interface more interactive. Consider implementing the hover effects as per the design reference to match the expectations.

    For example, hover effects for cards and buttons.

    Rest assured, the solution already looks solid! These tweaks will take it to the next level! Keep up the fantastic work! 🚀

    Marked as helpful
    0
    SmartAce•290
    @Smart-Ace-DesignsPosted 3 months ago

    @khatri2002 - thank you for the suggestions. I really appreciate you taking time to provide them. I will start working on them shortly.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord