Responsive page made using flex and grid

Community feedback

• 

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  Hi Karthikeya, Solution is responsive, well done! Here a few suggestions,

  • The divs with class main and paragraph can actually be main and p HTML elements. This is a semantically correct way.
  • Same as above use article tag for div .card.
  • List the info below the paragraph with ul. This is for semantics purpose. It provides more information to screen reader users.
  • The image as I see it is stretched a little. To preserve the aspect ratio of the image add object-fit: cover.
  • alt attribute of img is used to provide an alternative text for screen reader users and when image is not loaded for some reason. Change the text to a more descriptive one or if it's only decorative, as I think this is, hide it from screen readers with aria-hidden='true'.
  • It's better to use em/rem for font-size so that it scales when zooming in or when changing your font preference on browser settings. I'm not sure what you mean by clamp though.

  Keep coding!

  Marked as helpful

  0

  ---

  

  karthikeya pvs•190

  @karthik5860Posted about 2 years ago

  @Yemisrach15 I am asking if there is a better way to make font-size responsive or should I use clamp()

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  @karthik5860 sorry, I haven't used clamp() before. But em/rem is enough from my experience.

  0