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 Generator App

@FelipeDaCosta

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


Feedbacks welcome. Had a really hard time adjusting element positioning due to the varying size of the advices. How should I deal with this kind of situation?

Community feedback

@miranlegin

Posted

Hi Felipe,

congratulations on completing this challenge!

I suppose you are talking about positioning button element and if you are the solutions is pretty simple actually. All you need to do is get rid of height declaration on .advice-card container, that way you are making height more fluid and based on length of the text. Now your button is nicely positioned on a bottom edge of the container and all you need to do is push it (transform) somehow to the bottom even more. You can do that by transforming it on a Y-axis with: transform: translateY(50%);. That should fix the problem you are having.

Keep coding!

Cheers, Miran

Marked as helpful

0

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