Responsive preview card using CSS Grid & Flexbox

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 8 months ago

  Well done, Victor.

  A few suggestions:

  HTML:

  • Don't use "image" in the alt text, as screen readers announce that by default.

  • Use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • The link should be inside the heading, not the other way around.

  CSS:

  • Changing the font size is not a good idea.

  • Move font-family to body.

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

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • max-width on card should be in rem.

  • Remove max-height on the top image.

  Marked as helpful

  1

  ---

  

  Victor Feitosa Garcia•230

  @VFGarciaDevPosted 8 months ago

  @Islandstone89, Thank you for all your suggestions. I found everything very interesting and helpful, including the article about font-size. I'll try to implement more of your suggestions. I just have two questions about the CSS suggestions.

  • Instead of rem, could I use '%' when assigning the 'max-width' on the card?
  • What should I do to prevent the image of remaining on its original size if not using max-height/width?

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 8 months ago

  @VFGarciaDev Glad to help :)

  • No, use rem for max-width.

  • To prevent images from spilling out of their container, it is common to include the following in a CSS Reset, which should be added at the beginning of every stylesheet:

  img {
    display: block;
    max-width: 100%;
  }
  

  Marked as helpful

  1