Stats preview card component

Community feedback

• 

  Elyse Chambers•45

  @ElyseelooPosted over 3 years ago

  You're off to a good start for your first attempt :) You were able to make the card dynamic and move with the webpage, and a responsive webpage is always great. One way you can improve this, though, is by using the @media (max-width: #px) code in your CSS. This allows the card to change from a horizontal alignment in desktop view to a vertical alignment in mobile with the right CSS elements.

  For the stats, what I did was I gave the numbers a header tag, i.e. h2 for example. This way, it forces the rest of the words to be on the line beneath it.

  I also noticed that you have no CSS for your container div. You can put some padding around the sides of that div to center the words so that they won't be right up against the edges.

  You also have no font-size element in your CSS. This would contribute to the visual hierarchy of the page and help guide users' eyes to the most important elements.

  And for the image's purple color, what I did was I created an overlay div with the given purple color as the background color, made the image the parent of the overlay div, (you can do this by creating another div container for the other half of the card) and gave the overlay div a mix-blend-mode: multiply element. You can try this and see how it works, but make sure you give a height and width for the overlay div and change its position to absolute and the parent position to relative. Try this and let me know how it works!

  Other than that, you're off to a solid start! :)

  1

  ---

  

  HollywookOKC•20

  @HollywoodOKCPosted over 3 years ago

  @Elyseeloo Thank you so much! I am going to work on it right now!

  0

  

  HollywookOKC•20

  @HollywoodOKCPosted over 3 years ago

  @Elyseeloo I know im doing something wrong but how do I use the @media? I get errors or my page goes back to plain HTML.

  0