Responsive Stats Preview Card Component Using Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Sai, congratulations for your solution!

  I saw your solution live site and everything seems fine, the html is clean, the elements are responsive and this is great, you've used correctly the max-width / width but note that you cannot used this properties at the same time, choose max-width and delete the width.

  To match the image color overlay purple, use mix-blend-mode on the picture tag, code below:

  picture { mix-blend-mode: multiply; opacity: 0.75; }

  I hope it helps you bro, happy coding!

  Marked as helpful

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Sai, about your questions:

  1. I usually group the title and the body text together if they are most likely going to get the same width, and even if I decide to give them different widths, I'd still keep them in the same container and just select the element I want changed within the CSS.

  2. The responsiveness looks fine to me, and I think you've done well! If you feel you still haven't fully grasped the concepts, try playing around with the values a bit more and add an outline to all the elements with the inspector open to see what's going on as you change the browser size.

  3. To keep the image from being distored, add object-fit:cover to the img.

  4. I'd probably add a top and bottom padding for your component, because there could be times when your content is greater than the viewport height, such as when it's on a smaller screen.

  I know what you mean about adding divs halfway when you realize you need a container; to prevent that from happening I would try to add as many container divs as I can, but later I realize I only do that because I don't have an adequate understanding of some of the fundamental principles, like how boxes work and display properties like flex. It has helped me to go back to past challenges and look at how what I can remove, and it also helped to put an outline on all the boxes as I'm working. I think once you experiment more with layouts and containers, you'll gain more intuition on how to structure the divs.

  Good luck, keep at it!

  Marked as helpful

  0