Responsive Stat Card using Flexbox (Mobile & Desktop)

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Cole, well done completing this challenge! I'm glad you're happy with the results you got after all that hard work, and most importantly it sounds like you learned a lot in the process 🙂

  About your question on the overlay, it all depends on whether you had used an img for the image or the background-image in a div. I see that you used a background image, and so the way to add a filter would be to use the background-blend-mode or mix-blend-mode if you want to blend with the background of a parent container. I also used a background image when I first submitted this challenge (I've since updated it and used img instead), and this was my CSS:

  .card__image {
    width: 100%;
    height: 16em;
    background-color: hsl(277, 64%, 61%);
    background-image: url("./images/image-header-mobile.jpg");
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: 0.5em 0.5em 0 0;
  }
  

  There are really just three main things I would fix in your solution here:

  1. Right now it's pretty huge! The reason is because of the font-size: 1.5em that's on the body. What I would do is, change that to font-size: 1rem; (which is 16px basically), and things should look a bit more normal. To understand what's going on, I suggest checking out Kevin Powell's explanation on the difference between em and rem units, which you can find on his YT channel. I think he might even have a video on which units to use, so that might address the other point you mentioned.

  2. The photo is out of proportion right now, and so it looks distorted. While the background-size property can take percentages, I suggest using the value cover for images, which means to keep the picture in its aspect ratio and make sure that is covers the container, even if parts of it might get cropped.

  3. I see that you're using some viewport units to center your component. What I'd do instead is to remove those margins and instead use display: grid on the body selector for a quick solution:

     body {
        display: grid;
        place-content: center;
        min-height: 100vh;
     }
     

  Keep going, you're on way to getting real good at this! 😊

  Marked as helpful

  3

  ---

  

  Cole Y.•60

  @KoruxxPosted about 2 years ago

  @elaineleung thank you for explaining! The grid technique is really helpful to me because I've been wondering how to properly center my containers for a while. Why doesn't justify-content: middle; and align-items: center; work when trying to center the container in the screen?

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @Koruxx You're welcome 🙂

  So the reason why using middle won't work is because it's not actually a valid value for either the justify-content or align-items property; the only value for centering would be center. Also, using place-content: center as I did in my example is like combining justify-content: center and align-items: center. This is only available for grid though, not flex box, even though flexbox also has the two properties, just separately instead of one combined property.

  Marked as helpful

  1