resposnive blog-preview-card with flex-box

Community feedback

• 

  py-code314•340

  @py-code314Posted 3 months ago

  Hello,

  Nice job on the project. I think it is responsive enough, although I wanna make some suggestions.

  1. When I zoom-in, the top part of the card is going out of view. May be you can use min-height instead of height on body to prevent that
  2. h2:hover is working but h2:focus isn't working. I suggest you wrap h2 in <a> tag to access it with keyboard
  3. You shouldn't apply height to any container with text as it leads to overflow problem when you add more text
  4. Do not use px units for font-size as users can't increase font size in their browser. Use rem or em depending on the context
  5. There's an abrupt jump in size when the screen size reaches more than 390px. You might wanna make it a smooth transition
  6. To make it more responsive I suggest apply max-width to card only. Then everything in the card will adjust itself when you decrease screen width. You don't even need media query if you use clamp() to reduce font size

  All the best. Happy coding :)

  Marked as helpful

  0

  ---

  

  anwar-elbarry•110

  @anwar-elbarryPosted 3 months ago

  @py-code314 thank you very much ,i have realized many things now thanks to your help ,i truly appreciate your effort and support.

  0