Frontend Mentor - Product preview card component

Community feedback

• 

  Chyunjet•620

  @JetyunPosted about 2 years ago

  1. You can put the cart img tag into the btn class tag

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Luis, well done on this second challenge! 🙂

  About the image, to make it not squished, it needs to have an object-fit property, and you also need to change it to the desktop version when it gets to desktop view. Here's what I'd do:

  1. Add object-fit: cover to your img

  2. To have both the desktop and mobile images in the HTML, you can use an responsive image tag, with the breakpoint matching what you have in the CSS:

     <img alt="Chanel Perfume" 
           style="object-fit: cover;" 
           srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w" 
           sizes="(min-width: 650px) 600px, 686px"
           src="images/image-product-mobile.jpg" >
     

  3. Right now the .container looks rather small when the breakpoint comes in, and the photo can barely be seen; to fix this, change the width: 50% to max-width: 600px. This means that the container will grow to a size of 600px depending on the browser width and will not reach past that width.

  4. Lastly, add a width: 50% to both the .chanel and .card_body classes so that the two sections are even.

  To add the icon to the shopping cart, try wrapping the text with a <span> tag, add in the icon using either <img> or even directly pasting in the <svg>, and then give the button a display: flex with justify-content: center and align-items: center. Good luck!

  Marked as helpful

  0