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

Advice API app built with Flexbox and JS

@Meobot

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

Solution retrospective


I struggle a little bit with responsiveness. The advice paragraph sometimes pushes the horizontal rule and the button downward, and I was unable to find a good solution to implement after the fact.

As always, feedback is greatly appreciated!

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Nathan, I think it's because of the fixed height that's been set in the paragraph. I tried removing that in the inspector and things seem better. I also think the margins can be changed a bit, especially the top and bottom margins. Here's what I would try:

#advice-number {
   margin: 60px 0px 0px;
}
#advice-paragraph {
   margin-bottom: 2rem;
   height:    // remove height property
}
#pattern-desktop,
#pattern-mobile {
   margin-bottom: 1.5rem;
}

You can also check out my solution here: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9

Marked as helpful

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