Grid Layout w/ Flexbox for Product Card

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Spencer Daniel, well done on this second challenge! I think you did many things well, and good job on using the picture element. It looks like you learned a lot in this challenge and also handled a lot of problem solving 🙂

  About the image being warped, what you can do is to use object-fit on the img selector. For the images in this challenge, I think you can just use object-fit: contain (which makes sure the whole image is viewed within the parent container and its width contained within the sides). I also would add display:block to the img container, but better yet is to add a reset rule at the top of your stylesheet for all images, like this:

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  

  Once you add the object-fit, you'll see the image shift, and there should be a lot of white space; to fix that and remove all the white space, remove grid-template-rows: 1fr 1fr; in the .product-card for that media query. I'd also change the media query breakpoint to something a bit higher, like 620px in both the CSS and picture element; since the width of your desktop component is 600px, you'd want a bit a white space before it switches.

  Lastly, I'd add margin:1rem to product-card so that in the mobile view the sides of the card wouldn't touch the browser sides.

  Great work here, and keep coding! 🙂

  22

  Marked as helpful
• 

  Plinsinga•310

  @codedforfree

  Posted almost 3 years ago

  I think it looks quite good if you’re new to this. If I where you I would start by using some css variables for some of the basics like the fonts and colors.

  Also take a look at mobile styles. Maybe you can remove the grid styles and set it to block. Now you’re using grid to set a default behaviour.

  Keep up the good work 👍

  11

  Marked as helpful