Estoy tratando de hacer que un teclado virtual en mi sitio web responda al tamaño de la pantalla, pero tengo problemas. He intentado agregar una propiedad flexible y hacer que sea "1 1 automático", pero eso no funciona. las filas del teclado son ul y cada carácter es un li:

(Código en 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 a continuación)

 .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; }

(archivo .js que crea el ul/li si es necesario)

 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; },