Stats preview Flexbox, Mobile-first Workflow

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Deren D, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  1.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  2.One alternative to the overlay effect is to use mix-blend-mode instead of this:

  #color-overlay {
      width: 100%;
      height: 100%;
      background: var(--color-primary-300);
      opacity: .6;
      z-index: 1;
      position: absolute;
  }
  

  Import the image using <img> and apply:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Deren D. Marín•80

  @MorbitDemonPosted about 2 years ago

  @correlucas Thank you for the tips Lucas!! this is really helpful :)

  1