Tip Calculator with JS, HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin and/or padding isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  0

  ---

  

  Olga•190

  @cvtqxPosted 6 months ago

  @danielmrz-dev

  Thank you very much for the suggestion! I've updated my media query for desktop to position my container at the center of the screen.

  1
• 

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there! 👋

  you have a .calculator-container input selector, which targets the input element and has a higher specificity, so your .warning-input won't take effect. if you use only an element selector (input), instead of .calculator-container input your attribute class will be able to overwrite it. and you also applied border: none; to all fields, so you need to apply border or outline to the .warning-input selector.

  Hope this helps 🙏

  Good luck and happy coding! 🤙

  Marked as helpful

  0

  ---

  

  Olga•190

  @cvtqxPosted 6 months ago

  @kodan96 Thank you very much! Your suggestion helped me fix the warning element display.

  1