CODEWITHSUNDEEP
htmlcsswordpress
Kustom
Kustom

Reputation: 181

Social media buttons wont work

Ive cant seem to figure this out, as far as I know this is always the way I have linked to my social media buttons but the links wont work. Here's the URL: http://fantasyaficionado.com/news/

<ul class="social">  

 <li class="facebook"> <a href="https://www.facebook.com/fantasyaficionado">facebook</a> </li>
 <li class="twitter"><a href="https://twitter.com/FanAficionado">twitter</a></li>
 <li class="google"> <a href="http://google.com">google+</a></li>

</ul><!--social-->

The css is basically the same for all of these:

ul.social{
  float:right;
  li{display:inline-block;}
  margin-right:1%;
}

.twitter{
  text-indent:-9999px;
  background: url('images/mainsprite.png') no-repeat -99px -192px;
  width: 41px;
  height: 41px;
     @include breakpoint(tinyer) {
        background: url('images/mainsprite.png') no-repeat -90px -313px;
        width: 24px;
        height: 24px;
     }
    &:hover{
     cursor:pointer;
     background: url('images/mainsprite.png') no-repeat -99px -239px;
     width: 41px;
     height: 41px;
        @include breakpoint(tinyer) {
          background: url('images/mainsprite.png') no-repeat -90px -341px;
          width: 24px;
          height: 24px;
        }
    }
}

Upvotes: 0

Views: 91

Answers (2)

omma2289
omma2289

Reputation: 54619

Add this to your CSS

ul.social >li > a{
    display: block;
    width: 100%;
    height: 100%
}

Right now you only have the size of 100% for the facebook link, plus you're missing display:block, also you're repeating some CSS in your .facebook, .twitter, and .google classes, you can use a single rule like this to avoid code duplication:

ul.social > li{
    text-indent: -9999px;
    background: url("images/mainsprite.png") no-repeat;
    width: 41px;
    height: 41px;
}

Then just set the background position for each class

Upvotes: 1

jasonslyvia
jasonslyvia

Reputation: 2535

remove your text-indent in your li.facebook and other li, and add following css

li.facebook a {
    display: block;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}

Upvotes: 1

Related Questions