diff --git a/src/gui/css/options.css b/src/gui/css/options.css index 15bd8453a97e218a2a251c83b4f1a20ab1f0df47..b1210d5cd9c02591b2c47487e6a9033d92a4a4dd 100644 --- a/src/gui/css/options.css +++ b/src/gui/css/options.css @@ -4,12 +4,6 @@ div.options-group { align-items: center; } -@media only screen and (min-width: 1600px) { - div.options-group.double { - grid-template-columns: max-content auto max-content auto; - } -} - /* left side */ div.options-group div.description { margin-right: 10px; @@ -88,11 +82,30 @@ div.options-group input.full-width { width: 100%; } +/* custom row */ +.options-group .custom-row { + grid-column-start: span 2; + width: 70vw +} + +/* double column */ +@media only screen and (min-width: 1600px) { + div.options-group.double { + grid-template-columns: max-content auto max-content auto; + } + + div.options-group.double .custom-row { + width: 35vw + } +} + + .subHeading { width: 85%; text-align: center; margin-top: 1.5em; } + .scLink { width: 85%; text-align: center; @@ -108,8 +121,3 @@ table.invisible { border-spacing: 5px; margin:1em auto; } - -/* custom row */ -.options-group .custom-row { - grid-column-start: span 2; -} diff --git a/src/gui/options/options.js b/src/gui/options/options.js index 6f306cf2c1c6a85fafcfa0e4bd28797c54d41b92..19bc1b72e6c577c2cf4d9186b1a97aa020a1e1da 100644 --- a/src/gui/options/options.js +++ b/src/gui/options/options.js @@ -2,9 +2,8 @@ App.UI.OptionsGroup = (function() { class Row { /** * @param {HTMLDivElement} container - * @param {boolean} doubleColumn */ - render(container, doubleColumn) {} // jshint ignore:line + render(container) {} // jshint ignore:line } /** @@ -381,16 +380,10 @@ App.UI.OptionsGroup = (function() { /** * @param {HTMLDivElement} container - * @param {boolean}doubleColumn */ - render(container, doubleColumn) { + render(container) { /** @type {HTMLDivElement} */ const div = App.UI.DOM.makeElement("div", this.element, "custom-row"); - let factor = 0.7; - if (doubleColumn) { - factor *= 0.5; - } - div.style.width = `${Math.round(window.innerWidth * factor)}px`; container.append(div); } }