product page using grid and flexbox

Community feedback

• 

  Maximilian Dybvik•200

  @RegexRiddlerPosted 7 months ago

  Great job completing this challenge! 😁🙌

  • I have a few comments regarding your layout.

  1. I suggest you add a little more padding to the left side of the text.
  2. On mobile try to center your content vertically and add a little space around the card.
  3. Right now you only use the desktop size image for your product photo. Try loading only the smaller image on mobile device and the larger image for desktops.

  Suggested to me by @danielmrx-dev using the <picture> tag can help loading the correct image based on screen size, which is better for bandwidth and performance.

  This is your code.

  <div class="container">
      <img src="./images/image-product-desktop.jpg" alt="" class="img |" />
      .....
  </div>
  

  Here is suggestion on how to apply it.

  <div class="container">
      <picture class="product-image">
          <source media="(min-width: 632px)" srcset="./images/image-product-desktop.jpg">
              <img src="./images/image-product-mobile.jpg" alt="perfume bottle among green leaves">
      </picture>
      .....
  </div>
  

  Here is my submission, and my GitHub repo if you feel like comparing code.

  Marked as helpful

  0