Responsive product card. using Flex

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 1 month ago

  Hello Abiola Daniel, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem!

  link -> px to rem

  Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.

  Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

  See the example below:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  The rest is spot on.

  Hope it’s helpful to you. 👍

  Marked as helpful

  0
• 

  MrLanter•220

  @MrLanterPosted about 1 month ago

  Hi, I hope you are doing well. Congratulations for the efforts put into the project!

  I would like to offer you some suggestions:

  • You use a div with the class main, except that there is a better way to do it. You can use HTML semantic tags such as <main> in this case, or <footer>, <header>, ... to improve SEO, readability and code maintenance.

  • You use a div.page that contains two images, one for the desktop version and the other for mobile and a media query to choose which one to display. Instead, learn to use the picture tag that allows you to display the right image depending on the user's screen size. Here is an example code:

  <picture>
      <source srcset="images/image-product-mobile.jpg" media="(max-width: 48em)">
      <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum bottle">
  </picture>
  

  And there is no need for CSS in this example!

  • Text sizes should be in rem and not in px because people increase the font size in their browser and it might not respect their preferences. Here is a well-detailed explanation

  I hope this all helps, have a nice day !

  0