Stats Preview Card Component solution with Grid & Flexbox

Community feedback

• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Hello @ZenCode95. Congrats on your submission. However your preview card isn't quite responsive. You need to set up a media query targeting mobile devices and style the card as shown in the design.

  The overlay can be achieved using one of the <blend-mode> properties in css (background-blend-mode or mix-blend-mode). A value of multiply on these properties should do the trick.

  .main-card--img {
      background-color: hsl(277, 64%, 61%);
      background-blend-mode: multiply;
  }
  

  In this case you won't need img-overlay

  Happy coding

  0

  ---

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @dewslyse Hey there, thanks for the input. On the matter of responsiveness... Is it an actual requirement to include mobile as well as desktop layouts for these challenges? I had assumed that because each challenge provides examples of both it was ultimately a choice.

  Yes, I had actually spent some time tinkering with background-blend-mode but couldn't quite get the result I wanted. Guess I'll have to revise that then and see if I can make it work I suppose.

  0

  

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  @ZenCode95 This is from the project brief ⤵️

  "Your users should be able to:

  • View the optimal layout depending on their device's screen size"

  0

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @dewslyse Then there is still work to do yet...

  0