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

Anna P. M. 390

@annapmarin

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


This is my solution for this challenge 💫👩🏻‍💻

Built with React

Any suggestions on how I can improve and/or reduce unnecessary code are welcome!

Thank you! 🙏🏻

Community feedback

hamza 390

@Hamzaouladev

Posted

hello @annapmarin! heres some layout tips that you may find interesting:

-instead of giving the main component a fixed width in multiple break points, a simple but effective hack would be to give it a relative width: width: 90%; and a fixed max width like: max-width: 700px; these two lines will result in responsiveness plus smoother transitions between all break points without using media queries.

-usually its not a good idea to give your component a fixed height, because it wont be able to adjust dynamically to large amounts of content and you may run into overflowing issues, its better to manage spacing using other methods, here's a something you can try: The lobotomized owl selector

I hope you found my feedback useful, happy hacking!

Marked as helpful

0

Anna P. M. 390

@annapmarin

Posted

@Hamzaouladev Thanks!

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