Skip to content
Submitted almost 3 years ago

Responsive Stats Preview Card Component Using Flexbox

accessibility, styled-components
Sai•50
@A-C-Sai
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello Friends,

I need help:

  1. Did I structure my HTML properly? I think for the title and the text I set a set a max-width and wrapped them in a container to center them, don't know if this was a good approach. Also I find it hard sometimes to analyze a design and translate into a HTML structure, this leads to me adding a wrapper or additional div mid-project, how can I overcome this problem?

  2. I felt like I used max/min-width and height properties to size the card and the image without properly understanding them, would anyone be able to go over my code and suggest a better approach to this challenge?

  3. The image is distorted in the desktop version, any suggestion on how I could fix it?

  4. If I could improve on anything else which I haven't mentioned above please let me know.

THANKS IN ADVANCE :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    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
  • Elaine•11,360
    @elaineleung

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord