Responsive Stats Preview card using HTML and CSS

Community feedback

• 

  Mateus•30

  @MateusGCSPosted over 3 years ago

  Hello Igu! I found myself in a little bit of a struggle to finish this challenge too, but the closest solution that i had found to color the image, is to set your container background color to the light purple given in the style.guide, and use the "mix-blend-mode: multiply;" property together with "opacity: 0.8;". Hope this helped you out, here you can find the documentation to the property quoted: https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

  2

  ---

  

  Igu•95

  @igor-mitPosted over 3 years ago

  Thanks for the comment!!

  Idk what I'm probably doing wrong but it didn't work here

  It either gets too dark of too light, like it is now (updated). Don't know whats wrong :(

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Both of the suggestions 👆 in the feedback above are great ways to sort the image color

  I also recommend you

  • try to address the sizings, alignment and line height to get closer to the design
  • place the stats (each number and word pair) inside a meaningful element like paragraph or list item. Test should never be in a span or div only
  • fix the error in your report (no do type)
  • remove the font size off the root, or if you have it on there set it in %. If places on the body instead (more usual practice) put it in rem/em. Font sizes must never be in px
  • remove 100vw off the body. That isn't needed (body is 100% wide anyway) and will introduce issues because viewport units don't account for things like scrollbars

  Good luck

  1

  ---

  

  Igu•95

  @igor-mitPosted over 3 years ago

  Hey! Thanks for the help and taking your time to do so!!

  Got a little bit closer in terms of size now, I'm struggling to understand some things about width and heights using min and max... Tryed to address line height and did not understand why the <p> had much more distance between the lines than the <h1> for example

  Fixed the error on the report!!

  Got font-size on the body using rem :) Didn't get why it should never be in px though

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @igor-mit rems scale properly with different zoom settings users might be using on their devices or browsers, but pixels do not

  Found a great article that shows a side by side comparison if you scroll down of what happens when fonts are in px https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/

  0
• 

  P

  Ryan Cahela•220

  @RyanCahelaPosted over 3 years ago

  I colored the image by adding a css pseudo element and positioning it absolutely over the image, then I added a HSLA background color to the pseudo element.

  A quick example.(not complete code) .hero-image { position: relative background-image: url(“path to image file”) }

  .hero-image:before { position: absolute height: 100% width: 100% background-color: hsla(“insert hsla values here”) }

  1

  ---

  

  Igu•95

  @igor-mitPosted over 3 years ago

  Thank you!

  Tryed to but, again, there's something I'm not getting right on the spot.

  The pseudo didn't even show when I tryed to use it :(

  0

  

  P

  Ryan Cahela•220

  @RyanCahelaPosted over 3 years ago

  @igor-mit If you have the time you should read up on pseudo elements I didn't include all of the css you need to have them show up. specifically, I think there needs to be a " content: ""; " rule on the psudo-element (so basically setting the content of the pseudo element to an empty string of text.)

  Further Reading

  w3Schools

  MDN ::before

  I hope that helps.

  1