CSS Flex - Stats preview card component

Community feedback

• 

  Pierre ||| per.net•180

  @finkenmannPosted almost 2 years ago

  I like your approach to implementing responsive behavior. I had to think about how to implement that as well, but came up with a different solution.

  What I like is that you don't make the width before the breakpoint grow even more, which just makes the page fall apart. (That's why I chose my breakpoint earlier, but got other problems ;-) Also nice is the solution for the desktop, where you let the elements grow in height. In real life you could use a higher resolution photo, so that it can grow in size.

  Hmm... let's see if I should rebuild my version. But I'll wait and see if there is any feedback.

  Translated with www.DeepL.com/Translator (free version)

  Marked as helpful

  0

  ---

  

  𝗸𝗵𝗮𝗹𝗶𝘀𝗵𝗮. ♡•120

  @stkhalishaPosted almost 2 years ago

  @finkenmann Hi Pierre! Thanks for your feedback :)

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  there is no need to give the image a height of 100% , add display: block to it if there is a little space between the image and the content

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  𝗸𝗵𝗮𝗹𝗶𝘀𝗵𝗮. ♡•120

  @stkhalishaPosted almost 2 years ago

  @Hassiai Hi Hassia! ☺️ Nice to know you. Thank you for your feedback! already fixed those things as you suggested!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This challenges requires the use of two images 🎑 for different breakpoints. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • The statistics at the bottom are a list, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  𝗸𝗵𝗮𝗹𝗶𝘀𝗵𝗮. ♡•120

  @stkhalishaPosted almost 2 years ago

  already fixed those things as you suggested! As usual thank you @vcarames ☺️

  0