Product preview card for 1440px and 375px

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @NadiaFrShLm, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  To clean your code and use a shortcut to place the images mobile + desktop without need of any media query, use the tag <picture> instead of two <img> wrapped in a div or using background-image. Look that for SEO and search engine reasons it isn't a better practice to 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!

  Marked as helpful

  1
• 

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  Hello,

  Depending of your strategy to follow the design, you may not taking care of the paragraph font-size.

  My strategy is to open figma and add frames with the pictures of the project in it (with their original sizes). After you can measure elements and spacings and write text with the according font to know every sizes used.

  Subscribing to the pro version of Frontend mentor is the best choice offcourse because you can have the design files.

  Marked as helpful

  1