FB share button

I have used CSS to transform/increase my facebook share button. It works and increases the scale of FB share button on my desktop. However, it doesn't increase the button at all when viewing on my mobile device. It works just fine on my logo for desktop and mobile device, so I am rather confused.

My CSS tansform scale for the logo and fb-share-button works perfectly on my desktop. On my mobile device, the logo works but not fb share button. Just weird. I might try removing fb-share font-size and width. Anyway, these CSS are for all media.. Any help is greatly appreciated.

.fb-share-button { height: inherit; font-size: 14px; width: 120px; background-color: orange; display: inline-block; padding 30px 15px 25px 15px; margin: 22px 22px 42px 65px; }

.fb-share-button { transform: scale(3.0); -ms-transform: scale(3.0); -webkit-transform: scale(3.0); -o-transform: scale(3.0); -moz-transform: scale(3.0); transform-origin: top left; -ms-transform-origin: top left; -webkit-transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; }

.logo { transform: scale(2.0); -ms-transform: scale(2.0); -webkit-transform: scale(2.0); -o-transform: scale(2.0); -moz-transform: scale(2.0); transform-origin: top left; -ms-transform-origin: top left; -webkit-transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; }