Skip to content
Submitted almost 2 years ago

Solution product card component, HTML and CSS

Felipe Mata•230
@BoxyPipesnake
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

Community feedback

  • Jeff Guleserian•480
    @jguleserianPosted almost 2 years ago

    Felipe,

    It looks like you made a really good attempt at the challenge. I like that you established all the colors as variables to guarantee consistency and reduce error. Also, good job using flexbox to hold the two prices in alignment despite their size difference. Your use of the display property for your images, and turning them on and off in the @media was also efficient and correct. In fact, there is a lot to affirm in your solution.

    Where I might venture to offer a few suggestions would be with respect to your broader structure. For example, your overall dimensions look larger than the original. The dimension of the desktop version was supposed to be 600px X 450px. I think this threw a few things off and resulted in you trying to stretch images, hide the excess, and make everything larger than was asked. Of course, in spite of that, you did an awesome job on proportioning everything out.

    I also wondered why you didn't make the <main> a grid container right from the start - you certainly did it in your media query - and with success! By giving the <main> the proper width, creating the two even columns (or 40/60 split rows, for the mobile version), you would have been able to control the sizing a bit more. Since you didn't, I could tell you struggled with the font sizing (note that the text does not have the same line-breaks as in the exemplar), line-height, etc.

    Again, you did so much correctly! Here are some tips that helped me take better mastery of the sizing issues in my own work:

    1. You reset the box-sizing and cleared out the margins and padding - Good job! - consider also resetting the line-height in your :root, <html>, or <body, to 62.5%. Doing so will establish your rem at 10px (16px x .625 = 10px). Though you will have to define the font height of every element, you will have perfect control over the size, and rem and em will be the same thing.

    2. Look for clues in the styling guide to help you determine the exact dimensions of the project first, whether it is from a font-size, or a graphic, or an @media parameter.

    3. Once you have the dimensions, build your general structure from the outside box inward, nesting smaller containers into bigger ones. Then, add your content, and style the content from the top of the page down.

    I hope you are encouraged by completing this challenge - you obviously have a lot of skill and with practice, those skills will serve you very well.

    Marked as helpful
    1
    Felipe Mata•230
    @BoxyPipesnakePosted almost 2 years ago

    @jguleserian thanks for your feedback!!

    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