Skip to content
OverviewSolutions
4
Comments
1
Alan
@aljayy

All comments

  • Jose Chaparro•455
    @jchaparSubmitted over 3 years ago

    Hello Everyone, any feedback would be greatly appreciated! Would love to get some advise on how I could have matched the design better. Darker overlay, content width etc.

    CSS Grid and Flexbox Stats Card

    2
    Alan•75
    @aljayyPosted over 3 years ago

    Hey Jose,

    I got this feedback when I recently completed this same challenge a day or two ago.

    One thing you can do to get a closer match to the overlay is with the mix-blend mode:

    #card-image {
      background-color: #6E14B8;
}

#card-image > img {
      mix-blend-mode: multiply;
      max-width: 100%;
}

    From MDN: The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

    I would add some top padding to your stats to push them further down and closer to the card border, and increase the h2 height. Besides that, awesome job on the desktop site.

    Now for your mobile site, there's some more work to be done. The image doesn't show up at all and the card is way too narrow that the text is all bunched up together. I also struggled with this for way longer than I'd like to admit haha. So what I ended up doing was redoing my CSS and came from a mobile-first approach. Let me tell you man, total game-changer. The HTML default layout makes it so that your content flows from top to bottom which is what you want on mobile. I didn't even have to use the grid or flex to format my mobile site. And even when I created my media query for desktop I only used flex twice.

    Hope this feedback was helpful and let me know what else I can help with. From one chicano to another, we got this ✊🏽.

    Marked as helpful
    0