Skip to content

Commit

Permalink
Fix social share buttons overlapping on small screens
Browse files Browse the repository at this point in the history
  • Loading branch information
mmistakes committed Jan 22, 2015
1 parent 87b8d0b commit 7811c59
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 3 deletions.
6 changes: 3 additions & 3 deletions _includes/_social-share.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
8 changes: 8 additions & 0 deletions _sass/page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,7 @@ $button-size: 1.5rem;
}
}
a {
display: block;
padding: 8px 20px;
text-decoration: none !important;
text-transform: uppercase;
Expand All @@ -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;
Expand Down

0 comments on commit 7811c59

Please sign in to comment.