CSS Grid and Flexbox Stats Card

Community feedback

• 

  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

  ---

  

  Jose Chaparro•455

  @jchaparPosted over 3 years ago

  @aljayy Thanks a lot Alan! Really appreciate the feedback! I'll definitely look into the mix-blend-mode property and try to get the overlay to match better.

  Mobile has been such a headache for me haha. I saw on stack overflow that a mobile approach is definitely recommended so I'm going to start getting into the mindset of coding with this in mind. I'm currently working on another Front End Challenge but I'll be coming back to this one afterwards.

  Really appreciate it!

  0
• 

  Jose Chaparro•455

  @jchaparPosted over 3 years ago

  I redid the HTML markup and went with a mobile approach when it came to styling it. I feel happy that this version looks a lot better than the first submission. The one thing I've been having an issue with is the dark violet line underneath the image. I'm still currently looking but haven't been able to figure out why this line is visible on mobile and not desktop.

  0