Product_Preview

Community feedback

• 

  KapteynUniverse•1,520

  @KapteynUniversePosted 14 days ago

  I think the problem is you didn't use the real width of the images. A mismatch here may prevent browsers from selecting the correct image. Try this one:

  <img src="images/image-product-desktop.jpg" 
  srcset="images/image-product-mobile.jpg 686w, 
  images/image-product-desktop.jpg 600w" 
  sizes="(max-width: 600px) 100vw, 
  (min-width: 601px) 100vw" 
  alt="the product">
  

  But using picture tag would be better tho.

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

  For better responsiveness avoid using hard coded values like width: 576px; use max-width: 576px; instead.

  Use a modern css reset for every project.

  Marked as helpful

  1

  ---

  

  P

  CasperTheChild•100

  @CasperTheChildPosted 11 days ago

  @KapteynUniverse OMG!!😭 Thank you so much!

  0
• 

  Jay Khatri•120

  @khatri2002Posted 14 days ago

  The design seems good. However, there are few enhancements which can be done in order to achieve cleaner code and more accurate design.

  You've used 'p' tag to render the prices, however, a 'span' tag seems more relevant since we only wish to render a single word. Also, the strikethrough price text should be aligned center vertically.

  The height of image appears to be higher in the mobile view, resulting in scroll behaviour of webpage.

  Happy Coding!

  Marked as helpful

  0