Responsive Stat Preview card with CSS Flexbox

Community feedback

• 

  eagermonument81•210

  @ixtkPosted over 3 years ago

  There's no need to use grid here, you can make this particular component fully responsive with only flexbox.

  Few problems:

  • There's horizontal scrollbar on desktop layout
  • Component cuts off (top side) on mobile layout
  • You also needed to apply border-radius to the component

  Suggestions:

  • I would avoid setting fixed width and height with vw and vh units. Instead let the content grow or shrink the component and set margin for the sides on the parent elements. Maybe set max-width
  • I would use section HTML tag for this component
  • I would remove default margin from body

  Regarding purple background color:

  You could have added a separate div with purple background color, then used position property to position it on top of the image and give it little bit of opacity.

  Easier approach would be to use background-blend-mode property. Check that out

  PS: Check the website report

  0