Skip to content
Submitted 10 months ago

Response Tip Calculator App using CSS Grid

Nicolás Ortiz•170
@nico-ortiz
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

Hi! I have an error with styles, when you click to enter a bill value or a number of people, the height of container increases, if you can help me send your feedback. Any feedback is welcome!

Community feedback

  • Roksolana•910
    @RoksolanaVeresPosted 10 months ago

    Hey, nice job! To solve your issue with styles you can just set the fixed height for your inputs, so that the border that they get in the focus state does not increase their size and doesn't create this small shift in the layout you currently have, for example:

    .main-container .values-container .item-values-container .inputs {
    height: 40px;
}
    Marked as helpful
    1
    Nicolás Ortiz•170
    @nico-ortizPosted 10 months ago

    Thanks @RoksolanaVeres !

    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