Product preview card

Community feedback

• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  Great work in completing the challenge, Just some feedbacks:

  • As for your question, You could picture tag to move between two pictures depending on viewport dimension layout. For example: Our mobile layout design starts from viewport width of 375px and above that is desktop layout design . So we could use :

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

  You shall realize that in desktop layout, the primary image will appear and when the viewport dimensions decreases to 357 px in width ( mobile devices ), the image changes to image-product-mobile.

  • For your article class .product-card , It's better to make it flex instead of grid, The reason for that is because in desktop layout flex-direction: row ; and in mobile layout you could easily stack the image and details above each other flex-direction: column ;
  • I've realized the design doesn't change between desktop and mobile layouts, You should use @media ( media query ) to change your layout design and make it responsive.
  • No need to assign grid to body, If you've assigned it to center your design, you could add :

  display: flex ;
  justify-content: center ;
  align-items: center ;
  min-height: 100vh ;
  

  And main class .product-card-container will be centered in the middle of your website.

  Hope you find this Helpful.

  Other than that, Really Nice work & keep Going on .

  0