Responsive card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @ErriGarcia, some suggestions to improve you code:

  • Apply the background color to the Body Element to have it take up the entire screen.

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image 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.

  • Apply the following code to have each side take up the equal amount.

  Code:

   component-container > * {
          flex-basis: 50%
      }
  

  Happy Coding! 👻🎃

  1
• 

  Yılmaz ÇABUK•120

  @ylmzcbkPosted about 2 years ago

  Hi Enrica,

  I reviewed your solution and found some parts to improve:

  • Try min-height: 100vh for container to not overflow page.
  • You may want to take a look dynamic values like rem, em, vw, vh etc. to have a dynamic page for different sized devices.
  • All page content should be contained by landmarks so you need to use <footer><footer/> tag for attribution section too.

  Well done, good work!

  0