used css flexbox and grid

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 1 year ago

  Hi Psargar616

  Nice work so far on this challenge, you have done well. Here are a few things to look at:

  • when writing the alt values for images, the value should be able to convey a message that can be understood when the image fails to load (can be caused by a slow network or a network failure) . The alt value is also very important for assistive tech users.
  • font sizes should be written in rems where possible , see the following article on Why font-size must NEVER be in pixels
  • the image is cut off at the top especially when you view it on small devices. Try removing the following declaration and note the difference

  html, body {
  height: 100%;
  }
  

  Marked as helpful

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few thing that you can change.

  • The image only has border-radius on top-left and bottom-left
  • If you remove the padding around the card, it will look like the design from frontend mentor

  img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  border-radius: 0.5rem 0 0 0.5rem; /* change to this */
  }  
  
  @media(min-width:600px){
  .product{
  /*         padding: 2rem; */ /* you can remove this */
  grid-template-columns: 1fr 1fr;
  }
  }
  

  Marked as helpful

  0

  ---

  

  Pranjali Sargar•520

  @Psargar616Posted over 1 year ago

  @hitmorecode

  thanks for the suggestion. I'll try it

  0