Make virtual keybaord UL/LI responsive to screen size

Question

I am trying to make a virtual keyboard on my website responsive to the screen size, but I'm having trouble, I have tried to add a flex property and making it "1 1 auto" but that does not work. the keyboard rows are ul and each character is a li:

(Code in index.html)

    $('#keyboard').jkeyboard({
        layout: "english_capital",
        input: $('#puzzle'),
        customLayouts: {
            selectable: ["english_capital"],
            english_capital: [
                ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',],
                ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',],
                ['Z', 'X', 'C', 'V', 'B', 'N', 'M',],
                
                ],
        }
    });

(CSS below)

.jkeyboard {
  display: inline-block;
}
.jkeyboard,
.jkeyboard .jline,
.jkeyboard .jline ul {
  display: block;
  margin: 0;
  padding: 0;
}
.jkeyboard .jline {
  text-align: center;
  margin-left: 0px;
}
.jkeyboard .jline ul li {
      font-family: monospace;
font-size: 20px;
display: inline-block;
border: 1.5px solid #919191;
box-shadow:0 4px 2px -4px black
margin: 0px 0px 0px 2px;
color:#000;
border-radius: 4px;
width: 34px;
height: 58px;
box-sizing: border-box;
text-align: center;
line-height: ;
overflow: hidden;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
background:#eeeeee;

}
.jkeyboard .jline ul li.uppercase {
  text-transform: uppercase;
}
.jkeyboard .jline ul li:hover,
.jkeyboard .jline ul li:active {
  background-color: #000000;
}
.jkeyboard .jline .return {
  width: 120px;
}
.jkeyboard .jline .space {
  width: 456px;
}
.jkeyboard .jline .numeric_switch {
  width: 84px;
}
.jkeyboard .jline .layout_switch {
  background: url("../assets/locale.png") no-repeat center right;
}
.jkeyboard .jline .shift {
  width: 100px;
  background: url("../assets/shift.png") no-repeat center center;
}
.jkeyboard .jline .shift.active {
  border-color: #000000;
}
.jkeyboard .jline .shift.lock {
  transform: rotate(180deg);
}
.jkeyboard .jline .backspace {
  width: 69px;
  background: url("../assets/backspace.png") no-repeat center center;
}

(.js file which creates the ul/li if needed)

createLine: function (line) {
        var line_container = $('<ul/>');

        line.forEach(function (key, index) {
            var key_container = $('<li/>').addClass('jkey').data('command', key);

            if (function_keys[key]) {
                key_container.addClass(key).html(function_keys[key].text);
            }
            else {
                key_container.addClass('letter').html(key);
            }

            line_container.append(key_container);
        })

        return line_container;
    },