Skip to content
Submitted over 1 year ago

Calculadora de Gorjeta / Tip Calculator

MANOELA Urias•240
@Uriasmanu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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
    @tan911Posted over 1 year ago

    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

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