Preview Card By Using HTML, CSS

Community feedback

• 

  Mark Lawson•90

  @walkonmars36

  Posted about 2 years ago

  Hi

  These don't need to be links

    <ul>
            <li>10k+ <a href="#">companies</a></li>
            <li>314 <a href="#">templates</a></li>
            <li>12m+ <a href="#"> queries</a></li>
    </ul>
  

  Using a list is the right way to go, but for each list item you could specify two <spans>, for example,

    <ul>
            <li>
                 <span>10k+ </span>
                 <span>companies</span>
            </li>
    </ul>
  

  Make your span's display:block, as they are inline by default, meaning they'd sit next to each other and give each one a class name to control the styling.

  Also on your main, setting a width, say of 90% and a max-width of around 1110px (use the rem equivalent) will give you some space either side of the card on mobile and ensure it doesn't grow beyond a maximum size on desktop.

  There's a few other things, but this should help you 🙂

  Best wishes

  20

  Marked as helpful
• 

  P

  Atif Iqbal•3,320

  @atif-dev

  Posted about 2 years ago

  **Hi! Congrats🎉 on completing the challenge. You need to use flex-direction: column; in body selector for centering.

  10

  Marked as helpful