Responsive preview stat card component

Community feedback

• 

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  Hello Veronica. Nice work on the card. One thing that I think will help you is how to make the image responsive. Create a <div> container that will hold your image -

  <div class="image-container"> <img class="image" src="./whatever"> </div> -

  Once you have this add this code to your .image css code: .image { max-width: 100%; max-height: 100%; object-fit: contain; overflow: hidden; } This will force the image fill the container and change responsively and keep its aspect ratio.

  Marked as helpful

  1

  ---

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @PeshwariNaan Thank you for your response and for viewing my code. I appreciate any input in making my code more responsive. Could you please tell me what browser you are using to view my site? I'd like to view what you are seeing from your end, so that I may make the appropriate changes, currently on my Chrome & Firefox my image is holding it's ratio accurately.

  I do notice when changing my screen size, the text tend to overlap the image - which I'm sure the sizing of my text div may need to be adjusted with min/max-width.

  Thank you for your time! ~Veronica

  0

  

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  @VLOrozco I'm using Firefox. Yes the ratio is just fine for this project and looks fine from my browser. This was more to help when the screen size gets smaller horizontally so you don't have the issue of the picture going into the text box. If you set just a max height and max width for the whole container you can get the card to shrink in both dimensions. When this happens sometimes there can be issues with getting the image to do the same thing. With the code I sent you, that won't happen because the image will scale. Honestly you don't really need it so much here and your solution looks great but in your future projects that will be a little more complex, it will definitely come in handy.

  1

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @PeshwariNaan Ah! I understand now, thank you for taking the time to respond. I will review my code again and make the according adjustments. I appreciate you taking the time to make my code more awesome! 🙂

  0
• 

  Yewande Adeyemi•110

  @WandesanguinePosted over 2 years ago

  You’re really good. I learnt a lot from your code. I have to apply them in my own code

  0

  ---

  

  Veronica Orozco•280

  @VLOrozcoPosted over 2 years ago

  @Wandesanguine Thank you for your reply Yewande and for taking time to view my code. ~Veronica

  0

  

  Yewande Adeyemi•110

  @WandesanguinePosted over 2 years ago

  @VLOrozco Happy coding

  0