Tip calculator app

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  Hello AlexCristea2007, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  I noticed that your component is growing a lot at higher resolutions, to resolve this we can do the following:

  .calculator {
      width: 100%;
      padding: 2%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5%;
      background-color: var(--white);
      border-radius: 10px;
      max-width: 820px;
  }
  

  Instead of using "width" to specify an absolute width, use "max-width" to specify a maximum instead. By doing this, the content will behave much more amiably in smaller resolutions, making it easier to make the project responsive.

  The rest is spot on.

  Hope it’s helpful to you. 👍

  Marked as helpful

  1

  ---

  

  AlexCristea2007•520

  @AlexCristea2007Posted 29 days ago

  Hey @AdrianoEscarabote, thank you very much for this small adjustment I missed. Even though the interior design is displayed accordingly inside the main wrapper, you're right here saying that it stretches way to much on wider screens.

  1