@traez's Stats preview card component using HTML and CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Trae, this is a really good attempt, and I think you did a good job on the whole. The only thing I'll point out here is for the image, you might need an object-fit: cover if not the entire image is shown in the challenge (meaning it's cropped).

  I can see in your code that you must have tried many different ways to get it to work, and so there's a lot of extra code in there that you may not need. The key to writing out these components that change from rows to columns is, you need to see which element you actually need to specify a width or height for (whether fixed or responsive) and remember that if you set something for a parent element, you may not need to set it for the child. Chances are, once you set the width for one element, the other ones will resize themselves accordingly and won't need you to give it a width/height. It's good to keep experimenting a few bits at a time, and once you find out which line actually worked, you can delete or comment out what doesn't.

  Overall, what I'd suggest is to build up some more knowledge about flexbox and using responsive properties such as max-width, and then keep experimenting. Here's a CodePen I wrote up for another challenge just as an example of the bare minimum code you need for this kind of a component (link at https://codepen.io/elaineleung/pen/GRxMLrz).

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Trae Zeeofor, congratulations for your solution!

  I have some tips to improve that:

  1.Add height:100vh; to the body to enable 100% of the viewport height then add 'display: flex;and align the body to center withalign-items: center;andalign-content: center;`.

  2. Use margin: auto auto; inside the main tag instead of margin: 5% 5%;. To align the content fully.

  3. To match the picture color as the design files you can use mix-blend-mode: multiply; opacity: 0.82; inside the img tag. But don't forgot to delete the previous effects you've applied otherwise the mix-blend-mode will not work.

  img { mix-blend-mode: multiply; opacity: 0.82; }

  The rest is all fine, well done Trae.

  I hope these tips help you to fix your solution, keep coding!

  Marked as helpful

  0
• 

  Shard Codes•430

  @Shard-CodesPosted over 2 years ago

  Hello Trae Zeeofor.

  You did a fine job on the challenge.

  I can't rewrite your code right now. But I can refer you to my code so you can learn from it. Here's the link to my GitHub repo. And as for your accessibility issues, you must always include the Src attribute on your images, So that if your image has any error the alternate text will appear. And it also helps the visually impaired.

  I hope this helps, Regards.

  Marked as helpful

  0