add media queries to form; center form on small screens

This commit is contained in:
Mark Eaton
2021-02-26 20:16:18 -05:00
parent a05b42da38
commit fa58bd97a8
2 changed files with 27 additions and 4 deletions
+24 -1
View File
@@ -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;
}
@@ -223,7 +223,7 @@
<a class="searchmenu" onclick="customizeSearch('Everything')">
<div class="col-xs-12">
<strong>Everything</strong>
<p class="faux-card">Search for all using OneSearch</p>
<p class="faux-card">Search for all items using OneSearch</p>
</div>
</a>
<a href="https://kbcc.cuny.libguides.com/az.php" class="searchmenu" onclick="customizeSearch('Databases')">
@@ -256,8 +256,8 @@
</ul>
</div>
<label class="sr-only" for="primoQueryTemp">Search terms</label>
<div class="input-group zero-margin">
<input type="text" class="form-control" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
<div class="input-group zero-margin form-width">
<input type="text" class="form-control form-width" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
</div>
<div class="input-group zero-margin">
<input type="submit" class="btn btn-default form-control" value="Search" type="submit" onclick="addPrimoQuery();" />