Skip to content
Submitted over 2 years ago

Advice API app built with Flexbox and JS

Nathan Rhodes•140
@Meobot
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

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
    @elaineleungPosted over 2 years ago

    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

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