Responsive, Less CSS

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Camille,

  Congratulations 🎉 for completing this challenge, your API component looks great and is functional. Also, it is great that you used the right semantic for your code. I have some suggestions, if you don't mind.

  1. You can wrap your button within a button tag and can store the image within it, instead of a p tag as p tags should contain texts instead. Also, you can give the button, a cursor property to make it look more like a button e.g. cursor: pointer;
  2. Instead of using a media query, you can give the .card, a max-width property e.g.

  .card {
     max-width: 540px;
     width: 100%;
  }
  
  body {
     margin: 0 10px;
  }
  

  I gave the body a margin property to prevent the card from touching the side of the screen.

  Rather than using the margin-top property, you can use the flex property to center the card instead e.g.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  Overall, great work and wish you the best for your future projects so keep coding 👍.

  1