Product card using html and css

Community feedback

• 

  Azhar•600

  @azhar1038Posted about 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 :)

  Marked as helpful

  1

  ---

  

  Wanderson Guedes•20

  @DevWandersonPosted about 2 years ago

  @azhar1038 Thank you, honestly I ended up getting confused with some properties. I thought the given sizes were the standard to be followed, I'll adapt and upload it on github

  0
• 

  Avinash Dhauni•170

  @avinashdhauniPosted about 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

  Marked as helpful

  0

  ---

  

  Wanderson Guedes•20

  @DevWandersonPosted about 2 years ago

  @avinashdhauni Thanks, I will review and make the changes properly.

  0

  

  Avinash Dhauni•170

  @avinashdhauniPosted about 2 years ago

  @DevWanderson Sure, if you need any help, I'll be happy to assist. I am also a beginner learning web development.

  Marked as helpful

  0