Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Calculadora de Gorjeta / Tip Calculator

@Uriasmanu

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone, I had a lot of difficulty finding the right logic to group all the results obtained in the interactions. When I finally got the Javascript part right, I realized that there was a problem with the CSS... (You'll find out when the bill is greater than R$ 1000 haha). I need to improve my knowledge in responsive design. I am open to suggestions as I couldn't fix the bill value. Thank you in advance!

Community feedback

tan 640

@tan911

Posted

Hello @Uriasmanu,

css:

  • Instead of giving your body element precise width and height definitions, you may utilize the display flex attribute to automatically center the content.
  • Employ specify width in the main class for your cards.
  • You place the button and card using absolute position everywhere. For positioning the content and the button, I advise using flex or grid.

More info:

flex and grid

Hope this will help, Thanks!

Marked as helpful

0

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