Stats preview card component

Community feedback

• 

  Mark Lawson•90

  @walkonmars36Posted over 1 year ago

  Also I use a resource from W3 schools for easily converting px to em, but be careful where you use em instead of rem. I think Kevin explains the difference in the above video, but if not the main thing to be aware of is that em only looks up one level, to an element's parent font size (which could be a h1 for example), whereas rem always looks to the root (r) font size. I tend to use rem for everything, except for padding, as this can work better if adding padding to button text for example.

  Here's the px to em calculator

  Marked as helpful

  0
• 

  Mark Lawson•90

  @walkonmars36Posted over 1 year ago

  Hi.

  Well done for completing the challenge. There's a few things you might want to consider looking at.

  First of all the HTML. You're getting those warnings above because your h2 needs to be an h1. Have a read of the document under the read more link. Also the second warning is because your attribution div needs to be wrapped in a footer section.

  Your stats div needs to be a <ul> with three <li> in it, then you can place two <span>s inside each <li> . I did exactly what you did here. It's semantically wrong and also bad for accessibility.

  <ul class="praga">
     <li> 
          <span>10k+<span>
          <span>companies</span>
      </li>
  
   ..... etc.
        </ul>
  

  You need to make the span display: block, as it is inline-block by default.

  Don't forget to put your name in the coded by too, or remove it completely.

  In the CSS, you might want to think about starting to use ems and rems instead of px. This is essential for responsiveness. Take a look at this video by the brilliant CSS guru Kevin Powell.

  His advice, on this video and others, will also help you in understanding about setting a max-width (responsive) as opposed to width (which is fixed), as you're doing in the container width.

  All the best.

  Marked as helpful

  0