Advice Generator with React/Typescript and tailwind-css

Solution retrospective
Looks like Advice Slip API
is currently down, but it was ok when I was building the project, so the code is valid.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @RubenSmn
Hi Nico, I just looked at your solution for the Advice generator app and the desktop version looks really good. But when I switch to mobile the
width
of thediv
is not responsive.I see in your code you're using Tailwind CSS and have a specific
desk
break point. You could add a defaultwidth
of something like80%
to the container div.<div className="w-[80%] bg-c-dark-grayish-blue relative m-5 p-5 rounded-xl flex flex-col justify-center items-center gap-5 desk:w-[33%] desk:gap-8 desk:px-10" > ... </div>
I also used Tailwind CSS for this. If you want reference something take a look at my solution
Marked as helpful
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