Responsive Product preview card component using only html, css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  Hi @LovelyFaisal 👋, 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 from the design and your live version 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:

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

  Result:

  .img, .info {
    flex: 50%;
  }
  
  .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    . . .
  }
  

  Other suggestions:

  • 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: 650px)" srcset="./images/image-product-mobile.jpg">
     <img src="./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

  ---

  

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  @MelvinAguilar Thank you so much

  1