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> <style>
body { body {
@@ -9,7 +14,6 @@ body {
#corona-alert { #corona-alert {
text-align: center; text-align: center;
background-color: #faf870; background-color: #faf870;
margin: -50px 6px 0px 12px;
padding: 5px; padding: 5px;
} }
@@ -266,16 +270,20 @@ a.no-underline {
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
#kb-cuny-logo { #kb-cuny-logo {
max-width: 30%; max-width: 30%;
margin-top: 30px; margin-top: 10px;
} }
#library-logo { #library-logo {
float: right; float: right;
max-width: 60%; max-width: 60%;
margin-top: -50px; margin-top: -70px;
margin-right: -80px; margin-right: -80px;
} }
#corona-alert {
margin: -50px 6px 0px 12px;
}
.form-width { .form-width {
width: 350px; width: 350px;
} }
@@ -303,13 +311,17 @@ a.no-underline {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
#library-logo { #library-logo {
text-align: center; max-width: 100%;
} }
#kb-cuny-logo { #kb-cuny-logo {
max-width: 100%; max-width: 100%;
} }
#corona-alert {
margin: -25px 6px 0px 12px;
}
.form-width { .form-width {
width: 220px; width: 220px;
} }
@@ -337,13 +349,17 @@ a.no-underline {
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
#library-logo { #library-logo {
text-align: center; max-width: 100%;
} }
#kb-cuny-logo { #kb-cuny-logo {
max-width: 100%; max-width: 100%;
} }
#corona-alert {
margin: -25px 6px 0px 12px;
}
.form-width { .form-width {
width: 300px; width: 300px;
} }
@@ -379,7 +395,7 @@ a.no-underline {
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
#kb-cuny-logo { #kb-cuny-logo {
max-width: 30%; max-width: 30%;
margin-top: 45px; margin-top: 25px;
} }
} }