Stats preview card component responsive using HTML and CSS Flexbox

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Ola Thaina,

  Great working finishing the project. Just to add with the suggestions done by our members of FEM, you can use background-color instead of box-shadow to add a color overlay to the image. Also, to make the color darker, you can add background-blend-mode: multiple to it. Have a look at this code to visualize it.

  .imagem {
      border-radius: 7px 7px 0px 0px;
      background-image: url(images/image-header-mobile.jpg);
      background-color: hsl(277, 64%, 61%);
      background-blend-mode: multiply;
      width: 100%;
      height: 100%;
  }
  
  

  I hope it helps :)

  Marked as helpful

  1

  ---

  

  Thainá Lopes•110

  @thainadlopesPosted about 3 years ago

  @fidellim Thank you for the help! : )

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Tdl2989 👋🏻

  I have some quick tips to help you fix the accessibility issues.

  • In the code, <div class="container">...</div> should be <main class="container">...</main> and this will fix the accessibility issues. Just, don't forget to generate a new repot once you fix the issues.

  I hope this was helpful 👨🏻‍💻 you made really good progress for the second project. Cheers 👾

  Marked as helpful

  1

  ---

  

  Thainá Lopes•110

  @thainadlopesPosted about 3 years ago

  @kens-visuals Thanks for the tip! : )

  0
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hello, this looks really good and you did a great job!

  • All I'd suggest is making the card responsive in desktop view. I noticed that from 770px to 830px the .container div overflows and gets cropped off by the window. Maybe instead of using fixed widths, try adding max-width instead. Good luck coding!

  Marked as helpful

  1

  ---

  

  Thainá Lopes•110

  @thainadlopesPosted about 3 years ago

  @Carlos-A-P Thanks for the feedback, I will make the changes.

  0