How can I stop my keyboard being cut off on mobile?

Question

I have a wordle clone that I working through as a learning experience, and I'm trying to figure out why my keyboard is getting cut off on the left side on mobile, but can be scrolled on the right side. As far as I can tell, the code to set up the keyboard should be responsive. My code and an example of the problem are below.

 #keyboard-cont-cont { width: 100vw; overflow: visible; } #keyboard-cont { margin: 1rem 0; left: 50%; top: 50%; padding: 0vw 40vw; display: flex; overflow: auto; flex-direction: column; align-items: center; background: solid lightGray; font-family: monospace; --e: calc(100vw / 35); } #keyboard-cont div { display: flex; overflow: auto; }.center { width: 50%; }.second-row { margin: 0.5rem 0; margin: calc(var(--e) / 2); position: relative; }.keyboard-button { font-size: var(--e); font-weight: 700; padding: calc(var(--e) / 2); margin: 0 2px; cursor: pointer; text-transform: uppercase; }.center { width: 50%; }.first-row { position: relative; overflow: auto; }.second-row { margin: 0.5rem 0; position: relative; overflow: auto; }.third-row { position: relative; overflow: auto; }.keyboard-button { font-size: 1rem; font-weight: 700; padding: 0.5rem; margin: 0 2px; cursor: pointer; text-transform: uppercase; }

 <div id="keyboard-cont-cont"> <div id="keyboard-cont"> <div class="first-row"> <button class="keyboard-button">q</button> <button class="keyboard-button">w</button> <button class="keyboard-button">e</button> <button class="keyboard-button">r</button> <button class="keyboard-button">t</button> <button class="keyboard-button">y</button> <button class="keyboard-button">u</button> <button class="keyboard-button">i</button> <button class="keyboard-button">o</button> <button class="keyboard-button">p</button> </div> <div class="second-row"> <button class="keyboard-button">a</button> <button class="keyboard-button">s</button> <button class="keyboard-button">d</button> <button class="keyboard-button">f</button> <button class="keyboard-button">g</button> <button class="keyboard-button">h</button> <button class="keyboard-button">j</button> <button class="keyboard-button">k</button> <button class="keyboard-button">l</button> </div> <div class="third-row"> <button class="keyboard-button">Del</button> <button class="keyboard-button">z</button> <button class="keyboard-button">x</button> <button class="keyboard-button">c</button> <button class="keyboard-button">v</button> <button class="keyboard-button">b</button> <button class="keyboard-button">n</button> <button class="keyboard-button">m</button> <button class="keyboard-button">Enter</button> </div> </div> </div>

index.html

<div id="keyboard-cont-cont">
  <div id="keyboard-cont">
      <div class="first-row">
          <button class="keyboard-button">q</button>
          <button class="keyboard-button">w</button>
          <button class="keyboard-button">e</button>
          <button class="keyboard-button">r</button>
          <button class="keyboard-button">t</button>
          <button class="keyboard-button">y</button>
          <button class="keyboard-button">u</button>
          <button class="keyboard-button">i</button>
          <button class="keyboard-button">o</button>
          <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
          <button class="keyboard-button">a</button>
          <button class="keyboard-button">s</button>
          <button class="keyboard-button">d</button>
          <button class="keyboard-button">f</button>
          <button class="keyboard-button">g</button>
          <button class="keyboard-button">h</button>
          <button class="keyboard-button">j</button>
          <button class="keyboard-button">k</button>
          <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
          <button class="keyboard-button">Del</button>
          <button class="keyboard-button">z</button>
          <button class="keyboard-button">x</button>
          <button class="keyboard-button">c</button>
          <button class="keyboard-button">v</button>
          <button class="keyboard-button">b</button>
          <button class="keyboard-button">n</button>
          <button class="keyboard-button">m</button>
          <button class="keyboard-button">Enter</button>
      </div>
  </div>
</div>

style.css

keyboard-cont-cont {
  width: 100vw;
  overflow: visible;
}

keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0vw 40vw;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  background: solid lightGray;
  font-family: monospace;
  --e: calc(100vw / 35);
}

keyboard-cont div {
  display: flex;
  overflow: auto;
}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
  margin: calc(var(--e) / 2);
  position: relative;
}

.keyboard-button {
  font-size: var(--e);
  font-weight: 700;
  padding: calc(var(--e) / 2);
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.center {
  width: 50%;
}

.first-row {
  position: relative;
  overflow: auto;
}

.second-row {
  margin: 0.5rem 0;
  position: relative;
  overflow: auto;
}

.third-row {
  position: relative;
  overflow: auto;
}

.keyboard-button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

Mobile w/ Media Query Desktop w/ Media Query

Answer 1

You can use media query to make it responsive according to screen size.

 #keyboard-cont-cont { width: 100vw; overflow: visible; } #keyboard-cont { margin: 1rem 0; left: 50%; top: 50%; padding: 0vw 40vw; display: flex; overflow: auto; flex-direction: column; align-items: center; background: solid lightGray; font-family: monospace; --e: calc(100vw / 35); } #keyboard-cont div { display: flex; overflow: auto; }.center { width: 50%; }.second-row { margin: 0.5rem 0; margin: calc(var(--e) / 2); position: relative; }.keyboard-button { font-size: var(--e); font-weight: 700; padding: calc(var(--e) / 2); margin: 0 2px; cursor: pointer; text-transform: uppercase; }.center { width: 50%; }.first-row { position: relative; overflow: auto; }.second-row { margin: 0.5rem 0; position: relative; overflow: auto; }.third-row { position: relative; overflow: auto; }.keyboard-button { font-size: 1rem; font-weight: 700; padding: 0.5rem; margin: 0 2px; cursor: pointer; text-transform: uppercase; } @media screen and (max-width: 450px) {.keyboard-button{ font-size: 1rem; font-weight: 600; padding: 0.1rem; } } @media not all and (min-resolution:450px) { @supports (-webkit-appearance:none) {.keyboard-button { font-size: 1rem; font-weight: 600; padding: 0.1rem; } }}

 <div id="keyboard-cont-cont"> <div id="keyboard-cont"> <div class="first-row"> <button class="keyboard-button">q</button> <button class="keyboard-button">w</button> <button class="keyboard-button">e</button> <button class="keyboard-button">r</button> <button class="keyboard-button">t</button> <button class="keyboard-button">y</button> <button class="keyboard-button">u</button> <button class="keyboard-button">i</button> <button class="keyboard-button">o</button> <button class="keyboard-button">p</button> </div> <div class="second-row"> <button class="keyboard-button">a</button> <button class="keyboard-button">s</button> <button class="keyboard-button">d</button> <button class="keyboard-button">f</button> <button class="keyboard-button">g</button> <button class="keyboard-button">h</button> <button class="keyboard-button">j</button> <button class="keyboard-button">k</button> <button class="keyboard-button">l</button> </div> <div class="third-row"> <button class="keyboard-button">Del</button> <button class="keyboard-button">z</button> <button class="keyboard-button">x</button> <button class="keyboard-button">c</button> <button class="keyboard-button">v</button> <button class="keyboard-button">b</button> <button class="keyboard-button">n</button> <button class="keyboard-button">m</button> <button class="keyboard-button">Enter</button> </div> </div> </div>