Mobile first - flex - first attempt ever at a design.

Community feedback

• 

  I'm Fabra•160

  @imfabraPosted over 3 years ago

  Wow, it looks really cool. to get the most similar color use "mix-blend-mode" with an opacity of 75%, consult the documentation, it will help you a lot: https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode

  I also invite you to see the solution I made of this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt

  Let's keep coding.

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @nfjwebuk! well done on this challenge! I definitely agree that you should try to make your designs look great on most screens if all is impossible :)

  When you're struggling with something CSS-related, it's always a good idea to open devtools and see what styles are actually being applied, and try to figure out why. What I see happen now is: as I open your solution on my desktop, the layout looks great, but at 1024px for example, the image div doesn't fill up the whole container height. Is that the issue you were having? This is because you have set a height on that div and it can't grow any taller than that. To fix it in your solution, I would suggest using height: auto (or initial, same thing in this case). Auto height normally means that the height is set to fit the content and you've got an empty div which would give you 0px, but as you've got flexbox there, it will stretch the children to fit the space available. Does this make sense? :D

  What I would also do is set a max-width on your whole card in your mobile layout - I just think it would look better and you don't lose so much of the image.

  And to get the overlay - you can set background-color on the same div as your image, and use background-blend-mode to blend it together.

  Hope this helps! If you have any questions let me know :)

  0

  ---

  

  nfjwebuk•20

  @nfjwebukPosted over 3 years ago

  @AgataLiberska

  Thank you very much for your reply, yes that's the issue I was having :) it drove me nuts. I tried to google but to no avail.

  Thank you for the tips, I will definitely try and work the height auto and max-width onto the card it's self. I will play about with the background-blend-mode also.

  Very much appreciates, cheers!

  0