Reduce bloated logo size in mobile view

diff --git a/css/app.css b/css/app.css
index 67f43c7..8d09ea4 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6821,9 +6821,12 @@ header#page-header {
 #sm-logo {
   float: left;
   background: black;
-  padding: 0 20px 20px; }
+  padding: 0 20px 20px;
+  width: 100%;
+  text-align: center; }
   #sm-logo img {
-    padding-top: 19px; }
+    padding-top: 19px;
+    max-width: 220px; }
 
 ul#sec-nav {
   display: inline-block;

diff --git a/header.php b/header.php
index 8e109bd..f385ad6 100644 (file)
--- a/header.php
+++ b/header.php
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><?php wp_title(); ?></title>
-    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/app.css?v=1.0.39">
+    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/app.css?v=1.0.40">
 <!--      <link rel="shortcut icon" href="<?php //echo get_stylesheet_directory_uri(); ?>/favicon.ico">-->
     <link href='//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
     <link href='//fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 289bc88..7ce6b73 100644 (file)
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -175,12 +175,15 @@ header#page-header {
 //    }
 }
 #sm-logo {
-    img {
-        padding-top: 19px;
-    }
     float: left;
     background: black;
     padding: 0 20px 20px;
+    width: 100%;
+    text-align: center;
+    img {
+        padding-top: 19px;
+        max-width: 220px;
+    }
 }
 ul#sec-nav {
     display: inline-block;