Product Preview Card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • By default, the <img> element is an inline element, and like other inline elements, it takes up only as much width as necessary, and it does not take up a full line by itself. This can cause an unwanted space at the bottom of the image. This happens because the image is treated as a character of text, and as such, it is subject to the font's baseline, which can result in some extra space below the image.

    To fix this, you can try the following:

    1. Set the display property of the img element to block. This will cause the image to take up the full width of its container and remove the extra space at the bottom.

     img {
        display: block;
     }
    

    2. As a curiosity, some CSS can help you remove some default styles like these.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Wrap <div class="attribution"> within the footer tag and add the alt attribute alt=" " to the img tag to fix the accessibility issue and error issues. the value of the img tag is the description of the image.

  There is no need for the margin value and overflow in the main.

  In the media query, give the main a max-width value for a responsive content.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Madeleine De Guzman•70

  @deguzmanmadeleine22Posted almost 2 years ago

  You can target the main image and place the border-radius there.

  As for the mobile, It wasn't showing up when I checked.

  0