Stats preview card component

Community feedback

• 

  Julie_Gz•450

  @Julie-GzPosted over 3 years ago

  Hello Bektemir,

  I just completed this challenge myself. I'm sure there are better ways to do this but I'll share what I did and hopefully you will find it useful.

  For the responsive images I used the <picture> tag in the html document. the picture tag allows you to tell the browser which image to use in what screen sizes. The "media" is similar to the media query in css, it allows you to set the conditions under which the image specified in the srcset will be displayed. If you want to know more google "picture tag mdn". <picture> <source media="(max/min-width: )" srcset="image source 1"> <source media="(max/min-width: )" srcset="image source 2"> <img src="fallback image for browsers that don't support the picture tag" alt=""> </picture>

  For the overlay, create a div(I'll name it parent here) and inside that div you will add your image and another div called overlay or anything you want. Creating the overlay affect relies on css, so in your css file set the "parent" div' to position: relative, and the "overlay" div to position: absolute, set the height and width in the "overlay" to 100% to cover the entire "parent" div and set the top, left, right, and bottom properties to 0, this will have it cover everything from edge to edge. Also use hsla. In the stule guide you'll find the colours you should use in the design, take the purple colour and change the colour unit from hsl to hsla, the (a) allows you to control the opacity with 1 being opaque and 0 being transparent, play around with it until you find what works best, between 0.4 and 0.6 should be fine I think.

  For your last question on which unit to use, I think em works well, you could use % and vw, but I can't give you advice on how because I don't use them, I find it hard to predict how they'll turn out in different screen sizes, especially vw unit, but maybe someone with a better understanding could guide you on this one.

  All the best with your work

  Marked as helpful

  1

  ---

  

  Bektemir•35

  @bektonixPosted over 3 years ago

  @Julie-Gz Thank you! That was really detailed feedback

  0
• 

  Burak CLN•385

  @brkclnPosted over 3 years ago

  Hello there, these are not a big problem no worrys :)

  • First responsive image try this; wrap with div and set width and height for the div

  <div>
  <img src="">
  </div>
  Css: 
  div {
  height: 300px, 50%, 10em etc..
  width:  300px, 50%, 10em etc..
  }
  img {
  width: 100%;
  height: auto; 
  }
  

  You can change width to max-width if you want up to you..

  • Second one for overlay u have to use "position: absolute" and parent should be "position: relative"

  just check it out : this is old but still working :)

  • The last one for margin - padding --> em* (recommended) or " % " for font-size rem*(recommended) and u can use "vh" for height

  Marked as helpful

  0
• 

  Bektemir•35

  @bektonixPosted over 3 years ago

  Thanks!

  1