improve header appearance

groups/new-homepage-3/homepage3-js-css.html

@@ -18,19 +18,15 @@ body {
         font-size: 1.5em;
 }
 
+/* style header */
 #library-name-header {
-        font-size: 4em;
         color: #003466;
         margin-top: 20px;
+        font-size: 4em;
 }
 
-/* style background image */
+#header-div {
-.kbcc-background-image {
+        padding: 30px 30px;
-        background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%), url("https://www1.kingsborough.edu/photo_album/kcc_campus_06/images/KG_Kibbee_3_jpg.jpg");
-        padding: 20px 0px;
-        border-radius: 5px;
-        background-size: cover;
-        margin: -30px 0px 30px 0px;
 }
 
 /* style navbar */
@@ -52,6 +48,15 @@ body {
         margin-left: 16px;
 }
 
+/* style background image */
+.kbcc-background-image {
+        background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%), url("https://www1.kingsborough.edu/photo_album/kcc_campus_06/images/KG_Kibbee_3_jpg.jpg");
+        padding: 20px 0px;
+        border-radius: 5px;
+        background-size: cover;
+        margin: -30px 0px 30px 0px;
+}
+
 /* style jumbotron */
 
 .onesearch-jumbotron {
@@ -297,12 +302,12 @@ a.no-underline {
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
-        #kb-cuny-logo {
+        #library-name-header {
-               max-width: 100%;
+               text-align: center;
         }
 
-        #library-name-header {
+        #kb-cuny-logo {
-                float: left;
+               max-width: 100%;
         }
         
         .form-width {
@@ -331,12 +336,12 @@ a.no-underline {
 }
 
 @media only screen and (max-width: 767px)  {
-        #kb-cuny-logo {
+        #library-name-header {
-               max-width: 100%;
+               text-align: center;
         }
 
-        #library-name-header {
+        #kb-cuny-logo {
-                float: left;
+               max-width: 100%;
         }
 
         .form-width {

groups/new-homepage-3/homepage3-template.html

@@ -10,7 +10,7 @@
                                 </div>
                          </div>
                          <div class="row">
-                                <div class="col-xs-12" style="padding: 30px 30px;">
+                                <div class="col-xs-12" id="header-div">
                                         <img id="kb-cuny-logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/kbcc-logo-CUNY.png">
                                         <div id="library-name-header">Robert J. Kibbee Library</div>
                                 </div>