Stats preview card component

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, great work on your solution congrats! Some suggestions:

  • You can use mix-blend-mode without the need of ::after and you'd get much closer to the design. If mix-blend-mode wouldn't exist that's a nice solution though! By removing after you can use:

  .right img {
   width: 100%;
   display: block;
   opacity: .7;
   mix-blend-mode: multiply;
  }
  
  .right {
    background-color:hsl(277, 64%, 61%) ;
  }
  

  • You have a media query for small screens but your page doesn't support between 468-1000px and content overflows. I'd suggest designing mobile version first then use min-width to design for bigger screens. This way you wouldn't deal with overflow and in general convenient approach is mobile first design. Also It'd be better to use max-width on containers instead width. By default width:auto and is responsive, overriding it takes the responsiveness away. Aside these great work and happy coding :)

  0