Product card - designed with grid

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted over 2 years ago

  Hey Mary, well done! your solution seems to be fine but there is some improvements which could be made

  1.For aligning the content to the center avoid using margin like here you did .contenedor{ margin: 12rem auto; } instead you can use this body{min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;} or body{ min-height:100vh ; display: grid; place-content: center; } in your code

  2.You can use <picture> tag in your html when you want to show different images at different screen sizes.

  Hope this helps you , happy coding ✌️.

  Marked as helpful

  1
• 

  Lucas 👾•104,280

  @correlucasPosted over 2 years ago

  👾Hello Mary, Congratulations on completing this challenge!

  Here’s some tips to improve your solution code:

  You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  0
• 

  Mukwende•1,370

  @mukwende2000Posted over 2 years ago

  Good job, its perfect, I was looking for your code, couldn't find it on git, where did you deploy your site.

  0