Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive, Less CSS

Camille 130

@fyrfli

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

romila 3,570

@romila2003

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord