Stats preview card component using HTML & CSS

Community feedback

• 

  Jullierme Rodrigues Gomes•95

  @jullierme-rPosted about 3 years ago

  • Removing the height: 100% from both, .card and .img-container, will make the layout nicer.
  • You're using only the image from the mobile layout even when the screen goes bigger, for this you can take a look at the HTML <picture> tag. It will help on the responsiveness of your images.

  1

  ---

  

  Nathannie Gomes•35

  @nathanniegPosted about 3 years ago

  @jullierme-r Hey, thanks for your feedback. I fixed the image issue using another solution, but I'll be looking up the <picture> tag.

  0
• 

  Han•45

  @creatorindiePosted about 3 years ago

  I love it. You can use object-fit to keep the shape of the picture. Also, don't forget to style headings and font-sizing!

  1

  ---

  

  Nathannie Gomes•35

  @nathanniegPosted about 3 years ago

  @creatorindie Thanks for the feedback. I fixed that!

  1
• 

  Ahmed Faisal•5,095

  @afrusselPosted about 3 years ago

  Good work. Nice try. Just playing with height for main container. I would like to request you please take a look of [my solution] ( https://afrussel.github.io/stats-preview-card-component-fm/) it may help you to find your issues

  1

  ---

  

  Nathannie Gomes•35

  @nathanniegPosted about 3 years ago

  @afrussel Hey, thanks for your feedback. I looked at your code and found your solution to inserting pictures on the page very helpful. I used the img tag inside a div and inserted the mobile and desktop pictures via CSS, but I keep getting a warning (all img tags must have a src). Did you figure out how to fix that?

  At first it was like this and visually it works just fine, but frontendmentor gives a warning:

  ontainer><img class="img" alt="women smiling at the office"></div>

  Then I looked it up on stack overflow and some users suggested adding the "//:0" (as bellow), but I'm still getting a warming:

  ontainer><img class="img" src="//:0" alt="women smiling at the office"></div>

  0