add media queries to form; center form on small screens

2021-02-26 20:16:18 -05:00
parent a05b42da38
commit fa58bd97a8
2 changed files with 27 additions and 4 deletions
@@ -29,11 +29,12 @@ body {

 .onesearch-jumbotron {
        text-align: center;
-        margin-top: 45px;
+        margin-top: 25px;
 }

 #onesearch-header {
        color: #003466;
+        font-size: 6em;
 }

 .zero-margin {
@@ -41,6 +42,28 @@ body {
        margin-right: -2px;
 }

+@media only screen and (min-width: 992px) {
+        .form-width {
+                width: 350px;
+        }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+        .form-width {
+                width: 220px;
+        }
+}
+
+@media only screen and (max-width: 767px)  {
+        .form-width {
+                width: 300px;
+        }
+        .zero-margin {
+                margin: auto;
+        }
+
+}
+
 #dropdownMenu1 {
        border-radius: 0px;
 }