Skip to content
Submitted about 2 months ago

Product Preview Card Component

Carlos Marte•160
@carlosmarte23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I've successfully styled my project using SASS/SCSS, though it was a challenging first experience. After extensive research, I believe I did a decent job. I plan to continue using it in future projects to become more proficient.

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

Since it was my first time using SASS, getting used to the syntax and multiple files, as well as the nesting it was challenging to say the least. I think i did a good job in the end after a lot of research on it about the common practices.

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

Please focus on the SASS/SCSS, if possible, what i did wrong or what can i improve on for the next time. thank you so much for your feedback.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted about 2 months ago

    Hi, @carlosmarte23

    I took a look at your solution and I have some suggestions:

    • Your card isn't centered, and it looks like the body has a margin at the top, which is causing the page to be scrollable on desktop viewports (likely unintended). I recommend using Flexbox or CSS Grid on the body to center the card (you can look up how to do this), and removing the margin: 2rem auto from your .product-card. This margin is creating extra space at the top of the page, but ideally, we want the body to cover the full viewport without extra space.
    • Use min-height: 100vh instead of height: 100vh in the body. The reason for this is that height: 100vh sets a strict height, which may cause issues on some devices or when the content exceeds the viewport height (e.g., on mobile devices with dynamic toolbars). By using min-height: 100vh, you're ensuring that the body is at least the height of the viewport, but it can expand if the content grows beyond that.

    Hope this helps!

    Marked as helpful
    1
    Carlos Marte•160
    @carlosmarte23Posted about 2 months ago

    Thanks for the feedback. Since I was so focused on using scss I think I forgot I the basics and didn't follow the design 100 percent. I'll update the code with your feedback. Thank you!! @huyphan2210

    1
  • Untest57•80
    @Untest57Posted about 2 months ago

    Hello Carlos Marte. I applaud your challenge. I was impressed by the increase in responsiveness on mobile.

    I would like to share some opinions.

    • There is something different from the design provided in the challenge.

      The size ratio of images and text does not match in Desktop.

    1
    Carlos Marte•160
    @carlosmarte23Posted about 2 months ago

    Thanks for the feedback. I'll try to update the code to follow the design more closely. Thank you again! @Untest57

    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