Fix social share buttons overlapping on small screens

Author: mmistakes

_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 -->

_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;