Stats Preview Card Component with Vanilla CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Though I had to zoom out since you are using 1440px as the desktop breakpoint which is too big for lots of users including who uses 1366x768 monitor. The 1440px on the design is not related to the breakpoint, toning that would be really nice.

  Some other suggestions would be:

  • Don't use height: 100% on the body as this is relative to the viewport. Use min-height: 100vh instead.
  • Do not position: absolute a large content like the .preview-card since this makes an element out of the flow. If you inspect the layout in dev tools, remove the height: 100% on the body and hover on it, you will see that it has no height since the element inside it is out of the flow.
  • Since you are just using position to center the layout, do it this way instead. On the .preview-card remove these stylings:

  left
  position
  top
  transform
  

  Then on the main tag add these props:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh; # makes sure to have enough height
  

  • You could have used ul for the .preview-card__stats selector since those are list of items that are inside it.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.

  Aside from those, great job on this one. Also the bem usage is fine, though I would just use a single block on this called preview^^

  Marked as helpful

  1

  ---

  

  Alejandro•100

  @thealexgonzoPosted about 3 years ago

  @pikamart thank you for your feedback! Yes I was struggling quite a bit centering the card vertically 😂 and it will definitely test those changes on my CSS. So in terms of the layout with different breakpoints, would you suggest I should just make it responsive on all the different sizes between the two specified screen sizes from the design?

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @thealexgonzo Hey, glad that you find it useful^^

  You mean creating different layout for every breakpoint something like that? Definitely not :>>

  If you somehow starts a project using a mobile first approach, you can typically address issues like this one.

  For example right, maybe from 0-900 pixel is a mobile to tablet layout, because phones can't be wider than that right, then the rest is just desktop layout.

  But do not just like create breakpoint for those sizes, create a breakpoint where the layout is not looking great and needs a bit of tweaking from that. Try resizing always your website from dev tools to see what sizes makes the layout "not" looks good.

  Marked as helpful

  1