Mobile First Responsive Stats Preview Card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="wrapper"> with the main tag. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size. The rem unit is relative to the browser and can be change by the user. The em is relative to the first font-size in em. the default size for both em and rem is 16px. i.e. 1rem/1em= 16px. For more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  vishy351•40

  @vishy351Posted almost 2 years ago

  @Hassiai Hi, thank you. I will definitely use your suggestions in my future projects. Still need a lot to learn.

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @vishy351 I forgot this, To get the color on the image, add background-color: soft violet; background-blend-mode: multiply; to .image-box and increase the opacity value to 0.7or 0.8

  Hope am helpful.

  Marked as helpful

  0

  

  vishy351•40

  @vishy351Posted almost 2 years ago

  @Hassiai Hi, thank you again . I will try to experiment with that and update the solution.

  Edit: Hi, I get best result when I put opacity to 1. The lower the opacity value goes , darker it becomes. So, I just removed the opacity but I liked the method so I will use it.

  0