Stats Card

Community feedback

• Account deleted

  Hi nikasana!

  Good works on that.

  • According to this design, you don't need any more breakpoint. One media query is enough for this.
  • If you use blend mode for image overlay, It will look like given design.

  mix-blend-mode: multiply;    /* blend its parents background-color */
  

  Now you don't need to use background-color twice. Use it only one time as a bg image and put the above code in its child. That's it. If you found it hard, let me know.

  • No matter either you use h2 or whatever.

  Thank you.

  Marked as helpful

  0

  ---

  

  P

  nikasana•40

  @nikasanaPosted over 2 years ago

  @EthenPage I have tried using mix-blend-mode: multiply; what am I doing wrong?

  1

  Account deleted

  @nikasana You are doing great. Keep it up.

  It think, you should still do a little more stuff as follows. Modify width for desktop version:

  .text {
      width: 350px;
  }
  

  After that modify these in desktop version, not for mobile:

  .subtitle {
      line-height: 1.5;
      letter-spacing: 1px;
      margin-bottom: 35px;
  }
  

  Then add these:

  .stats-item{
      text-transform: uppercase;
  }
  

  It looks your work more acceptable.

  Thank you.

  Marked as helpful

  1

  

  P

  nikasana•40

  @nikasanaPosted over 2 years ago

  @EthenPage Thank you. I meant that using mix-blend-mode: multiply; didn't work because the overlay width is somehow bigger than image width on other browser versions

  1

  Account deleted

  @nikasana Hmm, I've just noticed in firefox. In Chrome, it works fine though. In that case, height: 360px makes problem. Change it to min-height: 360px or just remove it.

  .stats-component {
    min-height: 360px; 
    width: 1024px;
  }
  
  .text {
    padding: 90px 80px;
    padding-left: 70px;  /* remove it*/
    width: 300px; /* remove it */
  }
  

  I think the problem will go away.

  1