Responsive Product preview card component using CSS Flex

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> within a footer tag and add the alt attribute alt=" " to the img tag containing the cart icon to fix the accessibility and error issue.

  To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

  In the media query give .img-container and .container a width of 50% or flex-basis of 50%.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Isaias Lopez•50

  @lpzisaiasPosted almost 2 years ago

  @Hassiai Thanks for the recommendations! Previously I tried to set the width to 50% in img-container and container but it didn't work, it wasn't really centered, so I resorted to placing the image at 300px with the maximum width being 600px. In any case, I put it in the new update, I hope you can help me understand why the two child containers do not respect 50%, I understand that it should work that way

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @lpzisaias There is no need for img { width: 100%;} rather give the img a width of 100% and a border-radius value. in the media query add a width of 100% to the img.

  0