Perfume

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 3 months ago

  Congratulations on completing this challenge! Your desktop version looks awesome.

  However, you mobile version needs a little work. First, it looks squeezed; you need to adjust the widths on the main and img to 300px, and remove the height on the img in the responsive.css.

  Next, the mobile image is the wrong image! When the screen size changes to mobile the image is supposed to switch to the mobile image provided. This switching images with changes in screen size is an essential skill, as several of the challenges have different images at different screen sizes. There are several ways to accomplish this. one way is to change your img to include a srcset, which tells the browser which image to use at which screen size.

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

  You may need to adjust the styles.css to fit the desktop in: increase main width to 660px (so the image is half the component) and remove the height from the main.

  Hope this helps! And keep on coding.

  1