Skip to content
Submitted over 2 years ago

Product Preview Card Component

Dan•300
@dtp27
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

  1. A had challenges getting the image and container in the Desktop version to adjust together. I used a simple div container to contain the image and that seemed to work better, but the transition between mobile and desktop is rough. I would love feedback on my CSS and any suggestions, thanks!

  2. What are some best practices for component class names? Is it better to name them based on functionality or what they are? For example, for the "Add to Cart' button, is it better to name it something like "buy", "button", or something else? I'm mainly concerned when this is at scale, and there are several buttons/pages. Thanks!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Dan, congratulations for your solution!

    Your solution seems pretty good at all, there's only some fixes you can pay a little bit of attention.

    1.The container before changes to mobile with the media query is not holding all the image, the image is having a different scale in comparison to the container, you can note that at 800px theres a big white gap top and bottom. To manage that you should inspect which fixed width is causing this behavior.

    My advice for you is to use display: grid; to set layout design and display: flex; to organize elements. In this challenge you could solve that with display: grid; grid-template-column: 1fr 1fr; and the layout is done, two equal column and two lines of code.

    2.The h1 is too big in the mobile version, is better you use the media query to changes the font-size to don't have the heading so big in comparison the paragraph and button.

    3.If you're interested in a better way name your classes, you should totally read about BEM Naming convention, that's kinda a 'framework' widely used in teams to have a standard between the css code.

    Here's a quick guide about BEM:

    https://css-tricks.com/bem-101/

    Hope it helps, happy coding! Keep it up DAN.

    Marked as helpful
    1
    Dan•300
    @dtp27Posted over 2 years ago

    @correlucas Thanks Lucas, I appreciate the feedback! I was able to use Grid for the overall layout like you suggested, and it went much smoother than the first time with flexbox. I'll also look into the BEM Naming Convention. Thanks!

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @dtp27 I'm happy to hear that Dan, keep it up!

    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