Blog Preview Card using Flex Box

Community feedback

• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 9 months ago

  HTML:

  • Never have text in divs alone. .topic and .date should be a <p>.

  • Wrap the date in a <time> element: <time datetime="2023-12-21">21 Dec 2023</time>.

  • Don't use words like "photo" or "image" in alt text. Screen readers announce images automatically, so writing it in the alt text is redundant. Change the alt text to "Headshot of Gary Hooper".

  CSS:

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the width on the card.

  • Remove height: auto - it is the default value.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  Marked as helpful

  1

  ---

  

  Ritesh Diwan•50

  @abandonedwafflePosted 8 months ago

  @Islandstone89 Thanks for the feedback. I have noted down your points and made changes according to it. Will also you these for future references. Thanks Øystein. Your feedback was very valuable to me.

  1