Responsive Card Component Project

Community feedback

• 

  abdulllah butt•190

  @Abdullahbutt3434Posted almost 2 years ago

  Hi @akibiaons, 👋, good job on completing this challenge! 🎉. The navbar looks very nice in your solution. I have a suggestion that might be helpful for you. you can use one div as a wrapper around your img tag, give it width and height, and set the width and height of your image auto or 100%. that will help you to resize or adjust images according to the challenge.

  Marked as helpful

  0

  ---

  

  Arthur Fernandez•10

  @akibiaonsPosted almost 2 years ago

  @Abdullahbutt3434

  Thanks! I was having trouble keeping the image and image description text the same height, as the image kept taking up much more space on the left half of the screen...

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  There is no need for <a> within a <button>, remove the <a> that is wrap in the button tag to fix the error issue. Replace <h3> with <p> and <h2> with<h1> to fix the accessibility issues.

  You forgot to add the mobile image of the perfume for the mobile design.

  In the media query for the desktop design give product-card a fixed width value, there is no need for align-items: stretch; and a padding value. e.g: .product-card{width:600px; grid-template columns: 1fr 1fr;}

  Hope am Helpful. HAPPY CODING

  Marked as helpful

  0