Responsive stats preview card component using SASS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  This looks good. Your scss would be more performant if you worked mobile first next time though.

  I recommend against scaling html font size down like this. It can introduce accessibility issues and it brings no real benefit to you (as you progress you'll completely stop thinking in "pixels" and there is no reason 1rem needs to equal 10px)

  For the image, I would've put it in the html tbh to make it easier to place, but how you've done it is OK. Its not good practice having empty divs in the html though. So of you're going to use background image, it's better to place it in a pseudo element and use padding on the card to prevent overlap with the image.

  The color of the image is done with mix blend mode multiply (or background blend mode in this case) and a little opacity

  One last tip / request - please Indent your code consistently. Your code editor can even do this formatting automatically for you

  Marked as helpful

  0

  ---

  

  Anna•130

  @Anq92Posted over 2 years ago

  @grace-snow Hello, thank you for tips :) Could you explain what kind of accessibility issues scaling html fonts size might cause? I use it, because it's just more comfortable and I thought it makes no difference to users since I use rems everywhere, so even if someone has different default font size the result should be the same. And the second thing - what do you mean exactly with scss and mobile first? I'm new to all of this and I want to learn from good resources, so if you have something you could share it would be great!

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @Anq92 the issue is that some elements don't inherit font size from the body. So even if you immediately scale font size back up to 1.6rem on the body, every developer working on a project has to remember to scale up the font size again every time on every element that may not inherit in some browsers. It's adding risk.

  With mobile first approach you code everything with the mobile view as the base, then use min width media queries to override particular properties for larger screens. Working this way usually leads to fewer changes in media queries, shorter code and better performance for mobile users (where performance matters more)

  Marked as helpful

  0
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  hi, I see you added image throgh css(background-image). You could have also done using <picture> tag inside HTML. There is concept called "Art-Direction", by which you can provide differnent image at different screen sizes. Here is an example:

  <picture>
    <source srcset="<image-path>" media="(max-width: 680px)" />
    <img src=" " alt=""/>
  </picture>
  

  You can add as many <source> tag with differnt condition. So the order is important. There can only be one <img> tag. This will be only used in cases when each and every conditions fail.

  To position the image you could have used flex-order property.

  Althogh your implementation is also current.

  Good luck,

  Happy Coding

  Marked as helpful

  0

  ---

  

  Anna•130

  @Anq92Posted over 2 years ago

  @besttlookk Great tips, thanks!

  0