Sizing switched out mobile logo

Hi all,

I’m using the following code in functions php to switch out the logo on mobile devices:

add_filter(‘avf_logo’,’av_change_logo’);
function av_change_logo($logo)
{
if(wp_is_mobile() )
{
$logo = “http://#######/wp-content/uploads/2015/09/x-mobile-logo.png”;
}
return $logo;
}
However – The logo is appearing slightly out of proportion in mobile browsers and I cannot figure out how to size it properly so it appears smaller.

It’s also tough to test on mobiles as they often have screen resolutions way wider than 768px so any code added in the ‘mobile’ bit of the custom css doesn’t kick in on most new mobiles, even though they’ll have switched to the mobile menu. Screeny attached below :)