css sprite transition in responsive design -

i'm trying create social toolbar, using sprite images. when mouse hover "button", transition take place.

i'm using code found in cmsms simplex theme; here example: http://jsfiddle.net/ttp7k/

css code:

ul.social {     padding: 0;     margin: 0 }  .social li {     float:left;     margin: 0;     padding: 0;     list-style: none;     margin-right: 6px }  .social li {     display: block;     width: 44px;     height: 44px;     transition: 0.2s ease-out;     -webkit-transition: 0.2s ease-out;     -moz-transition: 0.2s ease-out;     -o-transition: 0.2s ease-out;     text-indent: -999em }  .social li.facebook {background: transparent url('http://www.scott-knight.net/facebook-sprite.png') no-repeat 0 0} .social li.facebook a:hover {background: transparent url('http://www.scott-knight.net/facebook-sprite.png') no-repeat 0 -48px} 

html code:

<ul class="social">     <li class="facebook"><a title="facebook" href="https://www.facebook.com/">facebook</a></li> </ul> 

unfortunately implementation not responsive; i've tryed implement workarounds, far no luck. i'm asking find responsive layout.

thanks in advance!

http://jsfiddle.net/coma/vy4d9/

a.fb {     font-size: 20px;     display: block;     width: 1em;     height: 1em;     background: transparent url(http://www.scott-knight.net/facebook-sprite.png) no-repeat 0 0;     background-size: 100%;     transition: background-position 250ms; }  a.fb:hover {     background-position: 0 -1em; }  @media screen , (min-width: 300px) {     a.fb {         font-size: 24px;     } }  @media screen , (min-width: 600px) {     a.fb {         font-size: 30px;     } }  @media screen , (min-width: 800px) {     a.fb {         font-size: 44px;     } }