Design comparison
Solution retrospective
Thanks for checking out my solution. Please let me know if there is any improvement that can be made. Gracias.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Francisco, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
1- Page must contain a level 1 header click here
I noticed that the content was not centered, always prefer to center with
flex-box
orgrid
.For example:
removed this one:
.container { /* margin: 150px 10px 0; */ }
I added this:
body { min height: 100vh; }
The rest is great!
Hope it helps...👍
Marked as helpful1 - @K-ZimnyPosted about 2 years ago
For the button you can use
.btn-div { left: 50%; translate: -50%; } This will center your button in the middle of your divMarked as helpful1@fanifrancsPosted about 2 years ago@K-Zimny Could you please simply explain the translate property?
0 - @elaineleungPosted about 2 years ago
Hi Francisco, I think @K-Zimny gave you some good advice there for centering the dice. You'll also need to make sure the divider has a
width: 100%
so that the two marks in the divider line up with the dice.By the way I think how you wrote your data fetching is really great. Right now I'm viewing this on Firefox and it doesn't load the next advice due to caching. If you have Firefox, you can test it out as well. To fix that, add a request header object in fetch, like this:
fetch(url, { cache: 'no-cache' })
Hope some of this can help you out!
Marked as helpful0@fanifrancsPosted about 2 years ago@elaineleung Thanks for the observation. I'm going to do the fix ASAP.
0
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