From 7811c598b0a37dd303956fad4909caec6daa572b Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Thu, 22 Jan 2015 12:18:35 -0500
Subject: [PATCH] Fix social share buttons overlapping on small screens

---
 _includes/_social-share.html | 6 +++---
 _sass/page.scss              | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/_includes/_social-share.html b/_includes/_social-share.html
index d192e5cd..3c68277c 100644
--- a/_includes/_social-share.html
+++ b/_includes/_social-share.html
@@ -2,13 +2,13 @@
   <h4>Share on</h4>
   <ul>
     <li>
-      <a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i> Twitter</a>
+      <a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
     </li>
     <li>
-      <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i> Facebook</a>
+      <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
     </li>
     <li>
-      <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i> Google+</a>
+      <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
     </li>
   </ul>
 </div><!-- /.social-share -->
\ No newline at end of file
diff --git a/_sass/page.scss b/_sass/page.scss
index 528cd714..32711426 100644
--- a/_sass/page.scss
+++ b/_sass/page.scss
@@ -593,6 +593,7 @@ $button-size: 1.5rem;
     }    
   }
   a {
+	  display: block;
 	  padding: 8px 20px;
 	  text-decoration: none !important;
 	  text-transform: uppercase;
@@ -605,6 +606,13 @@ $button-size: 1.5rem;
 	    opacity: 1;
 	  }
 	}
+	span {
+		display: none;
+		@media #{$medium} {
+			display: inline;
+			padding-left: 5px;
+		}
+	}
 	h4 {
 		@include font-rem(14);
 		margin-bottom: 10px;