Skip to content
Submitted about 1 month ago

Product-preview-card with HTML and CSS

ldonnianni•130
@ldonnianni
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 specific areas of your project would you like help with?

I struggle not setting fixed sizes for the card. I tried to use %. I could make it work for the mobile site but not for the desktop. Finally i left all with fixed sizes.

Community feedback

  • Fikerte Tesfaye•170
    @Fikerte-TPosted about 1 month ago

    Great solution!! Your solution looks with the design, great job. However, there is still room for improvement. for example

    • instead of giving those properties to the body, apply them to the main element. main { display flex align-items: center justify-content: center background-color: min-height: 100vh } and remove all the properties from body

    • its important to give min-height rather than fixed height so that your content can grow larger when it needs to.

    • also don't use fixed height for product-card

    • making the footer fixed affects user experience because it overlaps on your content. Remove position-fixed and adjust the style

    Hope this helps. Happy coding

    Marked as helpful
    0
  • Zacarias Casimiro•50
    @zacarias39Posted about 1 month ago

    You gotta check your bottom padding!

    0

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