Stats preview card component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag to fix the accessibility issue.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units, click here

  For the color of the image, add mix-blend-mode: multiply to the img and change the opacity value to 0.8.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  jiju278•50

  @jiju278Posted almost 2 years ago

  @Hassiai thank you for the ressource, I've learnt a lot about CSS units by reading your tutorial :-) I will prefer using rem units to using px units

  0
• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  Hello, great job here. The <picture> tag gives web developers more flexibility in specifying image resources.

  The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to fill the browser viewport.

  The <picture> element contains two tags: one or more <source> tags and one <img> tag.

  The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

  The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

  For example

  <picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
  

  Looking at the example, at a minimum viewport width of 650px, the first image is displayed. At a minimum viewport width of 465px, the second image is displayed. Else the third image(fallback) is displayed.

  Secondly, the picture tag can stand independently, the same as the image tag and so does not necessarily need to be placed in a div.

  Read more about picture tags using the following links W3 - Schools and HTML Picture.

  Marked as helpful

  1

  ---

  

  jiju278•50

  @jiju278Posted almost 2 years ago

  @Ambe-Mbong-Nwi Thank you very much for your detailed explanation ! I have a better understanding of how the picture tag works now. I just have one remaining question. If I want to style my image with CSS, Should I need to select the picture tag or the image inside ?

  1

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @jiju278 I'm glad I could help. To style images in CSS, target the <img> tag instead. In the case of many images, you can give them different classes for differentiation.

  Happy NEW YEAR!

  Marked as helpful

  1