Stats preview card component in HTML5, SCSS, BEM, Gulp, Flexbox, Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Yari, congratulations for your solution!

  Your solution its really accurate, all the elements and colors are matching the design files.

  I've some tips for you and you see if is good idea to apply or not to your code Yari.

  If you want to improve a bit your code you can use less elements to wrap the two columns, there's no need for so many divs. Look that you container is fully responsive so you don't need to set so many media queries since the container is fluid it will contract and fit the information inside, so you can use only the mobile media query.

  Instead of managing both mobile and desktop image versions with media query and background-image a quick fix is to use the <picture> tag and wrap both images inside the html setting when the images should switch, with no need for media query for image changes.

  To reach the exact same color for the image overlay, you can use mix-blend-mode: multiply; and opacity: 0.8;.

  Hope it helps Yari, and happy coding!

  Marked as helpful

  1

  ---

  

  Yari Morcus•500

  @YariMorcusPosted over 2 years ago

  Hi @correlucas,

  Thank you for your feedback! I really appreciate it that you took your time for me.

  I implemented your feedback by doing the following:

  1. I replaced <header> with <picture>
  2. Added the right overlay color on the image

  At first, I did try to use <picture> instead of a CSS background image, but I couldn't get it working with the overlay. I didn't know about mix-blend-mode before (could not find anything of it on the internet at first) but now knowing that this feature exists, I could get it working. So thank you for that!

  The reason why I used so many media queries is because I didn't like the design on tablet, and since there wasn't a design given for tablet, I decided to add my own touch to it haha. But as a result, I did had to use more media queries.

  At the moment of writing, GitHub Pages didn't apply the CSS correctly just yet, so be aware of this when previewing the site

  1