Stat Card Solution Using Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  for the color of the image, add a background-color of soft violet, a background-blend-mode: multiply and opacity of 0.8 to .card2.

  .card2{
  background-image: url();
  background-size: cover;
  background-color: hsl()
  background-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Reduce the font-sizes you gave to the font , there is no need to give the main a height value, give .card1 a padding value for all the sides.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0

  ---

  

  Open World Project•80

  @OpenWorldProjectOWPPosted almost 2 years ago

  @Hassiai hey thanks for the feed back! I will say that by taking away the height of the main, the image disappears completely. Any idea why?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @OpenWorldProjectOWP, it's because its a background-image, reduce the height value of the main, there is no need for background position in .card2.

  0

  

  Open World Project•80

  @OpenWorldProjectOWPPosted almost 2 years ago

  @Hassiai So I went in and played around in the browser and by removing the background position for .card2, the image gets covered up when changing the screen sizes which takes away the image's responsiveness. So any way to remedy that? I don't want the image to get cropped when changing the width of the screen.

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @OpenWorldProjectOWP, in the media query for the responsive design, give the main a fixed max-width value, change the value according to the different screen sizes. give card2 a width of 100% in the mobile designs. main{max-width: 400px;} this can be a width for the mobile design.

  0