Stats Preview Card Component using HTML and CSS

Community feedback

• 

  Israel Pina•170

  @IsraelPina32Posted 11 months ago

  Good job !

  1

  ---

  

  Ayça Gürler•180

  @aybeguPosted 11 months ago

  @IsraelPina32 Thank you!

  0
• 

  Enis Kerti•590

  @eniskrtPosted 11 months ago

  Well done. In addition to others, you can use bootstrap classes for responsive design.

  1

  ---

  

  Ayça Gürler•180

  @aybeguPosted 11 months ago

  @eniskrt Thank you! Will consider that!

  0
• 

  Amir Hossein Peyvand•550

  @amirhossein-peyvandPosted 11 months ago

  Hey, well done :) You can use mobile-first approach. Using this method will be easier for you to style your project. First you style for mobile devices, then for larger devices. Use main tag for your card, then inside of it, use two divs, one for the content and the other div for your image container. Use display="flex", flex-direction="column" for mobile devices, and flex-direction="row" for large devices.

  <main> <div class="content"> // your content </div> <div class="image-container"> // your image element </div> </main>

  1

  ---

  

  Ayça Gürler•180

  @aybeguPosted 11 months ago

  @amirhossein-peyvand Thank you! I will look into that!

  0
• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  • You could insert your image inside a div, give the div width 50% of the container ( in your case main tag ) and the width of image 100%,so you can have responsive design.

  • You could clamp ( ) method in your coding ( font-size, width, etc ... ) ,so your design will change according to the viewport dimensions and will be suitable for any device layout.

  • Keep going on & nice work.

  1

  ---

  

  Ayça Gürler•180

  @aybeguPosted 11 months ago

  @kimodev1990 Thanks! I tried to insert image in a div but I guess i did something wrong because it didn't worked like I wanted. Will do what you said!

  0

  

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  @aybegu You're welcome any time ...

  0