Skip to content
Submitted over 1 year ago

Tip calculator with CSS, JS and HTML

Bruno•110
@BrunoSousa750
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

I did make the desktop similar to the original one, but i have a problem with the mobile, the input for the custom percentage won't appear and i don't know why, part of the reason i posted is for someone to save from my ignorance. Please give me any feedback that may help me improve thx.

Community feedback

  • Mikhail•440
    @MikeBeloborodovPosted over 1 year ago

    Hey there! A quick solution to your problem - find this selector in your mobile media query and change it:

    .tip-select input[type=number]{
text-align: right;
min-width: 12rem;
border: 2px solid hsl(183, 100%, 15%);
}

    Your input width is messing with you. You can also use devtools in your browser to see what CSS properties does your element have, it helps a lot.

    Marked as helpful
    1

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