css - Bootstrap 3 & Font Awesome clipping -


i have created quick & dirty simple website bootstrap 3 & fontawesome . looks except when on mobile (phone) , phone in landscape (rotated). seeing weird right hand clipping (see below) on 2 of 4 font awesome icons. have tested on several different browsers / mobile phones, same results.

vertical screen shot

correct

horizontal screen shot

incorrect - clipping

<div class="row rowpad"> <div class="col-sm-3 col-xs-6 text-center">     <a class="btn btn-default btn-lg" href="/menu/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cutlery fa-stack-1x fa-inverse"></i></span> <h5>menu</h5></a> </div> <div class="col-sm-3 col-xs-6 text-center">     <a class="btn btn-default btn-lg" href="/bar/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-glass fa-stack-1x fa-inverse"></i></span> <h5>bar menu</h5></a> </div>  <div class="col-sm-3 col-xs-6 text-center">     <a class="btn btn-default btn-lg" href="/social/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-camera-retro fa-stack-1x fa-inverse"></i></span> <h5>social</h5></a> </div> <div class="col-sm-3 col-xs-6 text-center">     <a class="btn btn-default btn-lg" href="/where/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-map-marker fa-stack-1x fa-inverse"></i></span> <h5>directions</h5></a> </div> 

any suggestions? on looking? thanks.

live website


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -