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

Community feedback

• 

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  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

  ---

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @WebDevCampos can you tell me how to remove that line

  0

  

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  @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

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

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

  0

  

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  @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

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

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

  1