Stats preview card component with css flexbox

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  Hey there, this looks good, and is reasonably responsive. The horizontal centering is nice.

  To your question about putting the data at the bottom of the space, there are a couple of ways you can achieve that in a flexible way. The first is to put margin-bottom: auto on the element above it. Margin auto will push out content in that direction as far as possible for it to go. So whatever the height of the container, your data would end up the bottom.

  The other alternative would be to wrap the left hand side in a container with display: flex; flex-direction: column; justify-content: space-between; And then wrapping your header and paragraph together, and your data, so you have two elements in your flex container. Justify-content space-between will then push them as far apart as the space allows.

  One other point to bear in mind is avoiding fixed widths or heights. Your main element currently has a width of 35em which works ok for most sizes, but as the screen shrinks, you end up with overflow. If you change this to max-width: 35em; width: 100%; then it will allow the container to shrink when there's no space left, but keeps that sensible width and doesn't grow too big on a large screen.

  Finally from a semantics perspective, I don't think it makes sense to have the data figures as headings. Headings need to make sense when read on their own, and '10k+' doesn't mean much on its own. Instead I'd make your data set into a ul with each of the three items being an li, you can then format each li how you need.

  Marked as helpful

  1

  ---

  

  jjjayed•270

  @Jane72-boopPosted about 3 years ago

  @AlexKMarshall Hi! Thank you very much for your really useful tips. I tried using the margin bottom, but it wasn't working at all. I probably just messed up something in the html structure. The alternative worked perfectly. I also changed the width of the main container. The data being a list made more sense, I apologize for making it a heading as I was too caught up with the idea of using pseudo selectors. Again, thank you very much for you help!

  0