Not Found
Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502

Submitted

Advice Generator app with flexbox

Sudhanshu 60

@sudhanshu-p

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


Can anyone tell me how to properly position the dice at the bottom border? The way I did seems so tricky, it can't be the actual way.... Any other way of dynamically setting the aspect-ratio for the background-images? Also some advice on dynamic padding?

Community feedback

DarkDev56 330

@dotfivesix

Posted

You need to make a container and set its position relative, in that container you can have your quote div and dice div, set dice div to absolute, now you can align that dice relative to our main contianer.... What you need to do is, set it to bottom (bottom: 0;) and left : 50%; But this wouldn't solve the problem exactly, do bottom : diceHeight/2 and left : calc(50% - diceHeight/2) e.g If dice's height is 4rem and width is 4rem too, do... bottom : -2rem; left : calc(50% - 2rem) i.e 2rem is half of 4rem which is original height/width this way u can align dice on top of main container, relative to it properly. Also quote doesn't change when you click on dice, implement that if you know... Anyways goodluck !

Marked as helpful

1

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