Product Preview Card Component

Community feedback

• 

  Elisabeth Erkekoglou•180

  @elic4vetPosted over 1 year ago

  Hello, you did a great work on this chalenge. There are just a few things that you could change. As i see in your code, you only use the mobile picture and not the desktop picture + the mobile picure. In this challenge we need to use both pictures. Your current main image overflows on the desktop version and it does not work properly.

  So that means that each image needs to be added with a specific class + alt :

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

  When a desktop device visits the page the mobile picture must NOT be displayed: .mobile-image { display: none; }

  I personnaly used for the desktop image the following settings:

  .desktop-image { width: 100%; height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-radius: 0.5rem 0 0 0.5rem; }

  And later to block the desktop image for the mobile devices : I used media queries :

  @media (max-width: 767px) { .desktop-image { display: none; }

  .mobile-image { display: inline-block; } }

  Have you thought about using display : flex / grid ? So that you can have two columns ? i used for my container : .container { display: grid; grid-template-columns: 1fr 1fr; } And for the body { body display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

  Hope this helps you a little bit :)

  0

  ---

  

  Asim Amir•300

  @AsimAmir1Posted over 1 year ago

  I really appreciate your feedback @elic4vet

  0