Prodcut Solution

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹This is a clear case for using the <picture> element, which allows the display of different images for different devices or screen sizes.

  <picture>
   <source media="(min-width: X)" srcset="images/image-product-desktop.jpg">
   <img src="images/image-product-mobile.jpg" alt="description">
  </picture>
  

  🔹The image of the perfume is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason.

  🔹'Gabreille Essence Eau De Parfum' should be an <h1>, there is no reason for <h2>. And the use of <br> is unnecessary.

  🔹The <del> element would be very suitable for the old price ($169.99).

  CSS 🎨, ACCESSIBILITY ⚖:

  🔹The page content could be centered using Grid or Flexbox. For example as follows:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  🔹It looks like you've used a lot of media queries, just one to separate the mobile and desktop versions should be enough.

  Please let me know if you disagree with something or if you want more information.

  Regards

  Marked as helpful

  0
• 

  Mohamed El Abd•280

  @PeaceCreationPosted over 1 year ago

  Ok, Thank You Very much For You Advice.

  0
• 

  Mohamed El Abd•280

  @PeaceCreationPosted over 1 year ago

  So, What You Suggest to use better than br in paragraph ?

  0

  ---

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @PeaceCreation Nothing, just try removing them and it should work fine.

  0