Product card using html and css

Community feedback

• 

  Azhar•600

  @azhar1038

  Posted over 2 years ago

  Hi Wanderson, congratulations in completing the challenge!

  To center the card, I see you tried to use flex but then went with transform. You can simply do this:

  body {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
  }
  

  This will bring your card to center.

  I also see that your cart icon is not visible. Your src should be images/icon-cart.svg but you have used /images/icon-cart.svg. The front / takes to root i.e https://devwanderson.github.io/.

  In the challenge two different product images are provided, one for mobile and other for desktop, you can use <picture> to specify which image to load on which screen using media query.

  You should also make your card more responsive by using min-width or max-width instead of fixed width. You should update your media query too so that you switch to mobile view before it compresses to much. Remember the width provided in style-guide are just for reference related to the picture provided or the width that frontendmentor uses to generate screenshot. So, don't just restrict on using those numbers.

  Please update your code link too. It gives 404 currently.

  Hope it helps :)

  11

  Marked as helpful
• 

  Avinash Dhauni•170

  @avinashdhauni

  Posted over 2 years ago

  Hello, I guess you forgot to make your project responsive. Also, there is an issue with your line-height on the paragraph. Image width should take up to 50% of the space. There is slight difference with your design and the given design. Also the font size could be smaller. But congratulations on working and completing the challenge

  02

  Marked as helpful