Responsive Advice Generator App | HTML CSS JS
Design comparison
Solution retrospective
Really happy about the results. Learn about the fetch functions, although I already had some experience with JSON files.
However, when I have a really big advice it can be... not very visual. Any comments about how to solve this?
Community feedback
- @Zy8712Posted about 1 year ago
Your site looks good and functions properly. To answer your question, if you wanna make more room for your advice you should probably adjust your box's layout (specifically with the divider). In my opinion, you should have the divider and button be locked into position using
position: absolute
. Additionally, you should have the Advice# be placed relative to to the top and a box of a certain size dedicated to the quote.So basically (you roughly need to):
- Change button from
position: relative
toposition: absolute
- Add
position: relative
to your.card
class - Remove
justify-content: flex-end
from your.card
class - Add
position: absolute
andbottom: 30px
to your.separator
class - Change
.card h4
to have amargin-top: 40px
andmargin-bottom: 5px
- Modify
.card h2
to:
display: flex; flex-direction: column; justify-content: center; color: var(--lightCyan); margin-top: 5px; margin-bottom: 20px; width: 450px; height: 200px; font-size: 28px;
This code I wrote is very rough, so you should modify as you see fit. Hope this helps to some degree 👍
Marked as helpful0 - Change button from
Please log in to post a comment
Log in with GitHubJoin 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