Responsive product preview card component using Flexbox, CSS Grid

Community feedback

• 

  Rebecca Padgett•1,860

  @bccpadgePosted about 1 year ago

  Hello @FazleLabib. Congratulations on completing this challenge!!!🎉

  I have some tips that might interest you to improve your solution.

  • Use min-height of 100vh instead of height of 100vh on the body. If you setting height: 100vh; on mobile devices your component would be cut off.
  • You can add spacing on the top and bottom on the body using padding: 5rem 0;
    • Use a media query to remove the padding: 5rem 0; on the body on desktop because the component wouldn't be in the center of the page.
  • In this challenge, you can use the <picture></picture> tag to change the image mobile to desktop and vice versa.

  REMEBER ALT TAGS ON IMAGES ARE IMPORTANT FOR ACCESSIBILITY

  • If image is purely decorative using aria-hidden: true; images will be ignored by screen readers.

   <picture>
      <source media="(min-width: 37.5em)" srcset="./assets/images/image-product-desktop.jpg" />
      <img src="./assets/images/image-product-mobile.jpg" alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it" />
   </picture>
  

  More info📚:

  Picture tag

  Here is my solution to this challenge: Product preview card component

  Hope this helps you and have any questions I would be glad to clarify them for you

  Marked as helpful

  1

  ---

  

  Fazle Labib•400

  @FazleLabibPosted about 1 year ago

  Hello @bccpadge,

  Thank you so much for your valuable feedback!

  Your feedback is really helpful and I learned a lot of new things that will come in handy for future projects.

  1