Stats preview card component using CSS flexbox and grid

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 10 months ago

  Hi

  This doesn't really look like the design yet. Try to get it much closer if you can, with sizings and colors.

  That image color should be done with mix-blend-mode mode and opacity on the img, along with the violet background color on that half of the card.

  Other feedback

  • this is one component and is not suitable content to be syndicated across pages and sites. Therefore it doesn't make sense to make half of it an article. Use a div
  • "image" can never be an alt description on an image. Decide if it is important content or not as that dictates how you should fix this. If it's decorative, make the alt empty, if it's meaningful, write a proper description that communicates the same as that image
  • the stats are a simple bullet point list with 3 list items. They are not sections and every word is not it's own paragraph
  • it's better for performance to link fonts in the html head instead of css imports
  • always use a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use
  • never make things 100vw wide. That can only cause bugs because viewport units don't account for scrollbars, so when one appears you are forcing the body to be wider than the available space. The body is already full width by default. It does not need a width property.
  • Never write font size in px. Use rem.
  • the max width of the component must be in rem not px so the solution works for all users, including those with different font size settings.
  • similarly, you must not set pixel widths on grid columns either. This should have two equal columns on desktop I think so you can use 1fr.
  • In future make sure you work mobile first. That means mobile styles should be the default layout.
  • media queries must always be defined in rem or em not px. That goes for media queries in css and usually in the picture element in html but that can depend on image quality.
  • as already explained above you won't need that overlay div or it's styles on the image
  • the img is missing object-fit so is becoming distorted at some screen sizes.
  • do you mean to be using em for the padding on the text half of the component? I would expect pixels there as you probably don't want it to scale with the users font size settings; But if you did want it to scale with the font size settings then I'd still expect to see rem. You only want yo use em very intentionally and it's not common.
  • You never want to use em for font size. It compounds so doing that can lead to awful font size bugs that are hard to debug
  • line height can be in em if you like (because you would always want it to remain proportional to the font size) but it is more usual to see it unitless like 1.5.
  • I can see you are generally getting confused between padding and margin. Elements like paragraphs are not boxes. They have no concept of "internal" spacing. You want to create spacing around them so should be using margin. here is an article about padding vs margin

  0