My goal is to make my website keyboard-friendly on mobile devices. I had been using @media queries, but with limited testing capabilities, I want to ensure broad coverage. Currently, Bootstrap is being used for the images, but I struggled to find a suitable tutorial for creating a group of buttons.
<div id="keyboard">
<div class="keyboardRow">
<button id="keyboardKey" class="keyboardKey">A</button>
<button id="keyboardKey" class="keyboardKey">E</button>
<button id="keyboardKey" class="keyboardKey">I</button>
<button id="keyboardKey" class="keyboardKey">O</button>
<button id="keyboardKey" class="keyboardKey">U</button>
<button id="keyboardKey" class="keyboardKey">P</button>
<button id="keyboardKey" class="keyboardKey">H</button>
</div>
<div class="keyboardRow">
<button id="keyboardKey" class="keyboardKey">G</button>
<button id="keyboardKey" class="keyboardKey">R</button>
<button id="keyboardKey" class="keyboardKey">T</button>
<button id="keyboardKey" class="keyboardKey">K</button>
<button id="keyboardKey" class="keyboardKey">M</button>
<button id="keyboardKey" class="keyboardKey">N</button>
<button id="keyboardKey" class="keyboardKey">W</button>
</div>
<div class="keyboardRow">
<button id="buttonHint">Hint</button>
<button id="buttonQuit">Quit</button>
</div>
#keyboard {
font-size: 16pt;
width: 50%;
margin: 0 auto;
}
.keyboardRow {
position: relative;
text-align: center;
}
#keyboardKey {
display:inline-block;
border:1px solid black;
margin-left: 5pt;
font-size: 16pt;
width: 70pt;
}