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.
correct
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.
Comments
Post a Comment