How do I make my text and buttons automatically scale correctly on mobile (or why isn't it already)

Question

I'm making a web application and I'm having trouble making it mobile friendly. Using css @media tags I've been able to change the order of my divs so they're below each other instead of next to each other on mobile. This automatically caused most of my text to scale correctly, except for the buttons and inputs.
What am I doing wrong and how can I fix it?

The full CSS can be found here
The full HTML can be found here
The working application can be found here (But once I find a solution it will no longer have the issue)

The pieces of CSS that might be related are:

/*the outer container*/
#container {
    margin-left: 5%;
    margin-right: 5%;
    display: grid;
    grid-template-columns: 90vw;
    grid-template-rows: 80vw 80vw auto;
    gap: 15px 10px;
    grid-template-areas:
      "a"
      "b"
      "c";
}
/*the div containing both the controls and the explanation*/
#controls {
    grid-area: c;
    width: 100%;
    position: relative;
}
/*the color picker (including the apply and clear buttons)*/
#colorpicker{
    width: max(300px, 90%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1px 1px;
    grid-template-areas:
      ". u . . c"
      "l f r b c"
      ". d . . c";
  }
/*The two buttons within the color picker*/
#button {
    grid-column: 1;
    grid-row: 1;
}

So far, as you might see I have changed every possible size to a percentage, fr or a different variable size, this didn't help. There are no font sizes used, not for the forms or the explanation. Any advice?

Thank you very much.

Answer 1

I finally found it on w3schools: simply add <meta name="viewport" content="width=device-width, initial-scale=1.0">
Source: W3schools