Advice generator using vanilla css and js with semantic HTML
Design comparison
Solution retrospective
My first junior challenge.
Any advice is welcome, especially with the button since I could not figure it out how to align it correctly every time a new advice is generated.
Community feedback
- @leandrorodrigues00Posted about 2 years ago
Good evening !!
The button is going out of place because you used a percentage value. Percent value is always relative to parent value;
When the text on your main card gets too big, the button moves down too much, because the margin value is based on it.
You can prevent this using Rem, rem is relative to the font-size of the root element (html element). Then the button stops dancing !!
I suggest this change:
@media (min-width: 31.25rem) .btn-container { bottom: -1.875rem; }
Have a nice day, happy coding !! :)
Marked as helpful1@KevinMA95Posted about 2 years ago@leandrorodrigues00 You are right, that was the problem, I already made the changes and the button is in the correct spot now.
Thank you so much and happy codinng! :)
0 - @clarenceharrePosted about 2 years ago
Hi Kevin!
Love your solution. Before reading your code, I didn't realise I could use document query-selectors to update the DOM; I was using jQuery to achieve the same thing but slower page load due to CDN. You also taught me how to properly import Google Fonts.
Can offer what I did to get the button in the right position. I placed the button directly below the card div.
- In the buttons parent I use
text-align: center
- In the button I applied
position: relative; top: -27px;
I used the inspector to see how high the button was, then I moved it up half that amount. This is a little hacky but it works.
1 - In the buttons parent I use
- @johnclampetdevPosted about 2 years ago
Your app looks and functions great!
There are several ways you could align/center the button.
One way I prefer/suggest is using 'position: absolute' on the button, and 'position: relative' on the parent container (assuming its the div surrounding the advice/qoute)... by doing this, the button will always position itself RELATIVE to the parent container.
Look into 'position relative/absolute', AND "transform: translate" ... a combination of these CSS properties would definitely help in vertical and horizontal alignment, consistently every time.
Hope this helps!
1
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