Responsive stat preview card with flexbox

Community feedback

• 

  Mateus Gonçalves•90

  @mateuscgoncalvesPosted about 3 years ago

  Hello Kobinamd's, congratulations on your project!

  You can achieve the same result using another approach : Instead of two image tags you can use an empty div (or a more semantic tag) and set the background image (use media query to set the right image and size to each screen). Then you set the background-color to violet - hsl(277, 64%, 61%) and use background-blend-mode: multiply to achieve this effect.

  I use this approach to solve the challenge, take a look at my code if you have any doubt.

  Best,

  Mateus

  Marked as helpful

  0

  ---

  

  Kobinamd•110

  @KobinamdPosted about 3 years ago

  Hi Mateus, I have seen your approach but it requires specifying a height for the div which I am trying to avoid as much as possible. But your idea is good since there are two images involved. Thank you.

  0
• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  hello my dear friend ♥ you did good and clean but here some advice :

  • actually in your stat-para "m" and "k" it's upper case in main design
  • try make close as possible the white space in your card like in main design like padding , margin , etc

  0

  ---

  

  Kobinamd•110

  @KobinamdPosted about 3 years ago

  @CyrusKabir Ok. Didn't notice that. Thank you.

  0