Stat Card solution with entry level flex / html / css

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The layout in desktop is good, though it is smaller than the original, the mobile layout is good as well, but I think making it a bit more stretch will be good, sorry nitpicking on those.

  Some suggestions would be:

  1. Adding a padding to the top and bottom of the body tag, just to make some spacing to prevent touching both ceiling and flooring.

  2. To achieve that purple or what color is that, hmm. To achieve that, simply add background-blend-mode: multiply; on the rightCard selector, that blends the background-image and the color. Then after that, you will see the color changes, then just tweak the background-color to achieve what you want.

  3. Lastly, removing the margin-left: 20px on the card selector in mobile state will be good to make it centered properly. Also making the body have more width, like 90% instead of 80%. Since it is mobile state right.

  Regarding your concern:

  • On the image part, I don't see any img tags being used in here so I can't really help you that much on it. Though there are commented img tags, is that what you are referring to? But still, can't tweak if it is commented.

  • On the table part, well I think you are right not to use header tags on those since it doesn't really adds up to be heading as well. Also using that table element, it's rare for me to see one of those so really good job on that! Making it work really good, that's awesome. I rarely used it since there are too many, making table datas, table heading and it annoys me :>

  Overall, really great job on this^^

  1

  ---

  

  Michael•35

  @Mekes1670Posted over 3 years ago

  @pikamart Hey! Thanks so much for such a detailed reply, nitpicky or not I really appreciate it. The "background blend color" was what I tried but I must have messed it up. I'll give it a second look! I'll make sure I try that out again. I've been trying to use margin but I should really consider looking into padding for spacing on the body, I keep compensating for that by adding too much margin to other things so I'll keep that in mind for next time!

  In regards to the images, I had a lot of issues with the images breaking and resizing improperly during the desktop -> mobile view so I ended up trying and making the .rightCard a background image instead of an actual image and I liked that more. But when I collapsed it and went mobile it got rid of the background image altogether and I couldn't figure it out so I ended up just adding the mobile image back and having it display:none until the media query hit and then I just used the mobile image with display: block. This part I had more issues than I thought I would with it.

  Thanks so much for taking some time and looking, you cleared up a lot of my issues. :)

  0
• 

  Tobi Solomon•45

  @Tmajor97Posted over 3 years ago

  to tint the picture use overlay in css

  .container .picture .overlay{ background-color:rgba(99, 23, 147, 0.8); height:400px; }

  1

  ---

  

  Michael•35

  @Mekes1670Posted over 3 years ago

  @Tmajor97 Hey thanks for the reply! So I would make a separate div over the image itself and then set class to "overlay" and then add a background color through that? Just so I'm understanding correctly.

  0
• 

  Tobi Solomon•45

  @Tmajor97Posted over 3 years ago

  yes make a div with class picture and inside it make another div with class overlay and set a background-colour through it.....check work and GitHub for more details https://github.com/Tmajor97/stats-preview-card-component..

  https://www.frontendmentor.io/solutions/mobile-first-stats-preview-component-ow5x36jAA

  0