Product preview card component (flexbox)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  Hi @agelitaeme 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

  Here are some suggestions to improve your code:

  Your screenshot looks different with the design because you have not checked your solution in another browser, in the Firefox browser your design was damaged because in Firefox the height of your image is fine but the width of your image is taking the 600px that the image has in dimension

  To solve it follow these steps:

  • Use box-sizing: border-box; in your * selector. More information
  • Add the property flex: 50%; to card__image and card__info this way you are creating two columns. More information.
  • Use width: 100%; and object-fit: cover; in the image selector, with this the width of your image will fill the width of your column.

  Result:

  * {
    box-sizing: border-box;
    . . .
  }
  .card__image, card__info {
    flex: 50%;
  }
  
  .card__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  

  Other suggestions:

  • Try to fix the issues indicated by the report in this solution.
  • You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth. More information here

  Example:

  <picture>
     <source media="(max-width: 460px)" srcset="./assets/images/image-product-mobile.jpg">
     <img src="./assets/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum">
  </picture>
  

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  1