Blog Preview Card using CSS flexbox

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted about 2 months ago

  Hi

  I'm afraid this is overflowing my screen in the sides making it unreadable. The usual cause is using explicit widths when you shouldn't but I'll get to that in a moment. Before that there are some important HTML learnings to grasp.

  • all content should be contained within landmarks. Although this is only a single component demo and not a full page it's still good to get into that habit now so you don't forget later. Wrap this card in a main landmark.
  • look up how and when to write alt text on images. There are a few good posts about this in the resources channel on discord. Essentially decorative images must have empty alt values and alternative descriptions should never include words like "image" because it's already an image role.
  • This component would never be used to serve the main heading of a Web page so you know it shouldn't have a h1. Use a lower importance heading level instead like h2.
  • you've missed the most important feature of this component — what makes it functional as a blog card (a signpost to a blog elsewhere on a site) is having a link. But you haven't included an interactive element anywhere so this card becomes non-functional (pointless) if used in a site. Add the missing anchor inside the heading, wrapping the text of the blog name.
  • once that's done, you will need to make the whole card clickable. You can do that by making the card position relative and giving the link a pseudo element that is absolutely positioned to cover the card.
  • in the html head move the ‹title› near the top. It should come before all page assets. Order will matter for SEO and performance once you reach building larger sites so again this is just a good habit to build now.
  • make the body a flex column (it is row by default).
  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • the card must not have a max-height. Let the browser decide what height is needed based on the content. If someone was to enlarge their text size, translate the page to another language or a content author wrote a longer description your component needs to be able to adapt to that and not have overflowing content. It's an important principle to remember — dont limit the height of elements / components that contain text.
  • the cards max width should be in rem not px so that it scales correctly for all users including those who have a different text size setting. Using pixels means the card would stay narrow even if they had their text size set to be huge, whereas rem means the card max width would increase along with the text.
  • the card image shouldn't have a width or explicit max width like this. All it needs is what is in the css reset anyway: display: block; max-width: 100%. It is this max width that's likely the cause of the horizontal overflow I'm seeing.
  • the card should have padding but instead you're currently adding strange margins to child elements. Keep it much simpler. Give padding to the card on all sides, then child elements only need vertical margins.
  • the category must not have a max width. Again this will break when the content changes in any way, which is a bad thing. The width and height of that category should come naturally from the content plus padding.
  • font size should never be in pixels
  • don't ever add hover styles to non interactive elements or where an interactive element isn't present. That should ring alarm bells straight away that something is missing in the html because hovers almost always indicate interactivity (see above html recommendation then apply hover styles to the link)
  • I wouldn't expect any negative margins in this. It's more likely a margin-bottom is incorrectly set on an element above that. This post may help you understand the difference between padding and margin.

  1