Product preview card using flex box

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Meghannath, congratulations for your solution!

  I can see that you've used a different color for the background, you can have all font-size values and colors in the (starter files) styleguide.me.

  By the way the value background-color is: #F3EAE3. You can also use a Google Chrome extension called ColorZilla that's a color picker to copy the exact colors from the design files.

  Note that the font-family for perfum and paragraph are wrong, the font is 'Montserrat. Here's the correct font font-family: 'Montserrat', sans-serif;`.

  To fix the problem with product image not displaying in mobile version, use the tag <picture> inside the html and set when should be displayed the desktop and mobile versions. Picture is a quick way for dynamic images and there's no css need. Is a easier way to display different images without media query. Try that.

  The rest is all fine, you've match the paddings and the component layout. Congrats.

  Hope it helps you, and happy coding!

  Marked as helpful

  1

  ---

  

  Meghanath Shetty•30

  @ShettyMeghPosted over 2 years ago

  @correlucas thank you for correcting, i was trying to figure out the size issues and img not showing in mobile version.

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @ShettyMegh You're welcome, you do it using background-image as you've done, but using picture is the shortest way. Hope the tips help you to improve it.

  1