Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stats preview card component using HTML, CSS, JS, FLEXBOX

@venkat2305

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


please review

Community feedback

@WebDevCampos

Posted

Hello there! You did great! For this project I have put lots of divs, but you could handle it with less code than me. Although, if you allow me, I have a few observations. First, when in mobile, the card has something that is causing it not to proper fit, some kind of overflow. I get this a lot when using padding or margin where is not needed, maybe you could review it. Secondly, there is sort of a horizontal rule between the image and the text, and at last, the word Companies has a typo, it happens a lot haha 😅. So, my advice is to use fixed widths in this project. You can set a max-width:1440px to the card itself, when in desktop and max-width:375px when mobile. I didn't check the code in deep, but I think you're fine, and have just these few adjustments. If you feel like, please reach out! Kind regards!

0

@venkat2305

Posted

@WebDevCampos can you tell me how to remove that line

0

@WebDevCampos

Posted

@venkat2305 Sure thing! If I remember well, I just made a container inside the main component, gave it a display:flex; justify-content:space-between in order to divide the card into two sections and gave each div - one containing text and one containing the picture element - a width:100%, so the component is equally divided, and the image fills the space completely when you set img {width:100%; height:100%} -> my guess is that all you have to do, actually. That's the first step for building this project, for me at least it was. If you did like this, and still get this line between the image and text, if you allow me, I could send you a pull request showing some modifications. Kind regards!

0

@venkat2305

Posted

@WebDevCampos please do. I've tried but couldn't remove that line

0

@WebDevCampos

Posted

@venkat2305 I've sent an issue, since I'm not allowed to make Pull Requests. Hope we can collaborate in further projects! Kind regards!

1

@venkat2305

Posted

@WebDevCampos thank you so much. I would love to collaborate with you.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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