Author: Pedro Lucas Porcellis <pedrolucasporcellis@gmail.com>
Make form input elements full on small devices
src/static/stylesheet.css | 24 ++++++++++++++++++++++--
diff --git a/src/static/stylesheet.css b/src/static/stylesheet.css index 2eec176352f2221ec0ac6836504aad5237887106..652301ddd97e5ed235dae58dc55075a0a2b10678 100644 --- a/src/static/stylesheet.css +++ b/src/static/stylesheet.css @@ -14,6 +14,19 @@ text-rendering: optimizeLegibility; line-height: 1.6; } +.form-section input, textarea, select { + width: 100%; + font-size: 1rem; + line-height: 1.5; + padding: .25rem .375rem; +} + +.form-section input[type="email"], input[type="password"], input[type="tel"], input[type="text"], textarea { + border-color: #888; + outline: lightblue; + border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} + .container { width: 100%; padding-right: 15px; @@ -28,11 +41,18 @@ max-width:540px; } .navbar { - flex-flow: row nowrap; + flex-flow: row nowrap !important; + flex-wrap: nowrap !important; } .navbar ul { - margin-left: 35px; + margin-left: 35px !important; + width: unset !important; + margin-right: auto !important; + } + + .form-section { + width: 50%; } }