From 9a0cbc0558ac1883e8241523de867ce03fbe57d2 Mon Sep 17 00:00:00 2001
From: Mark Eaton <MarkEEaton@users.noreply.github.com>
Date: Fri, 23 Apr 2021 15:19:48 -0400
Subject: [PATCH] handle logo at different screen sizes

---
 groups/new-homepage-3/homepage3-js-css.html | 30 ++++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/groups/new-homepage-3/homepage3-js-css.html b/groups/new-homepage-3/homepage3-js-css.html
index 61cade8..6497b17 100644
--- a/groups/new-homepage-3/homepage3-js-css.html
+++ b/groups/new-homepage-3/homepage3-js-css.html
@@ -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,12 +349,16 @@ 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;
         }
 }