CODEWITHSUNDEEP
htmlcssresponsive-designresize
Ben Delany
Ben Delany

Reputation: 107

JS/HTML Keyboard Getting Cut Off on Mobile in Safari

I'm working through a wordle clone tutorial, and when trying to host my modified version the keyboard is getting cut off on mobile, and I can't figure out a way to either keep the entire keyboard on the screen at all times, or be able to scroll over to see the cut off part of the keyboard. Images and my css and div creation are below.

style.css

h1 {
 text-align: center;
}

p {
 text-align: center;
}

img {
    float: center;
    width:  150px;
    height: 150px;
    object-fit: scale-down;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;

}

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

#keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0px 0px;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
}

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

}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
}

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

Keyboard Creation

<div id="game-board">

</div>
<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>

Keyboard cut off on the left

Upvotes: 0

Views: 119

Answers (1)

A Haworth
A Haworth

Reputation: 36426

The code is using a mixture of units (px, rem, vw) to size the keyboard.

For many viewports this will be OK because the sum total of a row of keys will still be less than the width. However, for narrower devices the total may be greater, hence bits get cut off at the edges.

One way of making sure the rows stay within the viewport width is to use vw units to size the font and the surrounding padding.

The widest row in terms of characters is the bottom one. This snippet sizes things in relation to a unit '--e' defined as a fraction of 100vw.

This is just a preliminary demo, you may want also to look at margins. And if the keyboard seems to be getting too big on some devices you could use CSS to select a smaller unit instead (e.g. using min function or media queries).

<htmL>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      text-align: center;
    }
    
    p {
      text-align: center;
    }
    
    img {
      float: center;
      width: 150px;
      height: 150px;
      object-fit: scale-down;
    }
    
    #game-board {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .letter-box {
      border: 2px solid gray;
      border-radius: 3px;
      margin: 2px;
      font-size: 1rem;
      font-weight: 700;
      height: 3rem;
      width: 3rem;
      width: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
    }
    
    .filled-box {
      border: 2px solid black;
    }
    
    .letter-row {
      display: flex;
    }
    
    #keyboard-cont-cont {
      width: 100vw;
      overflow: visible;
    }
    
    #keyboard-cont {
      margin: 1rem 0;
      left: 50%;
      top: 50%;
      padding: 0px 0px;
      display: flex;
      overflow: auto;
      flex-direction: column;
      align-items: center;
      background: pink;
      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);
    }
    
    .keyboard-button {
      font-size: var(--e);
      font-weight: 700;
      padding: calc(var(--e) / 2);
      margin: 0 2px;
      cursor: pointer;
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <div id="game-board">

  </div>
  <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>
</body>

</html>

Upvotes: 1

Related Questions