handle logo at different screen sizes

This commit is contained in:
Mark Eaton
2021-04-23 15:19:48 -04:00
parent 1fd02faa01
commit 9a0cbc0558
+22 -6
View File
@@ -1,3 +1,8 @@
<script
type="text/javascript"
src="https://use.fontawesome.com/releases/v5.15.3/js/conflict-detection.js">
</script>
<style>
body {
@@ -9,7 +14,6 @@ body {
#corona-alert {
text-align: center;
background-color: #faf870;
margin: -50px 6px 0px 12px;
padding: 5px;
}
@@ -266,16 +270,20 @@ a.no-underline {
@media only screen and (min-width: 992px) {
#kb-cuny-logo {
max-width: 30%;
margin-top: 30px;
margin-top: 10px;
}
#library-logo {
float: right;
max-width: 60%;
margin-top: -50px;
margin-top: -70px;
margin-right: -80px;
}
#corona-alert {
margin: -50px 6px 0px 12px;
}
.form-width {
width: 350px;
}
@@ -303,13 +311,17 @@ a.no-underline {
@media only screen and (min-width: 768px) and (max-width: 991px) {
#library-logo {
text-align: center;
max-width: 100%;
}
#kb-cuny-logo {
max-width: 100%;
}
#corona-alert {
margin: -25px 6px 0px 12px;
}
.form-width {
width: 220px;
}
@@ -337,13 +349,17 @@ a.no-underline {
@media only screen and (max-width: 767px) {
#library-logo {
text-align: center;
max-width: 100%;
}
#kb-cuny-logo {
max-width: 100%;
}
#corona-alert {
margin: -25px 6px 0px 12px;
}
.form-width {
width: 300px;
}
@@ -379,7 +395,7 @@ a.no-underline {
@media only screen and (min-width: 1200px) {
#kb-cuny-logo {
max-width: 30%;
margin-top: 45px;
margin-top: 25px;
}
}