Hiding Logo Subtext on Mobile Device

Hello there, trying to get some help here with a problem that I’m experiencing.

I’ve achieved showing another version of my logo in the header when the user scrolls down. I’m using this code in the child theme’s functions.php:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= '<img src="http://sdsitetech.com/santiagomultisport/wp-content/uploads/2017/04/no_Icon_phase2-02.png"/>';
    return $sub;
}

and this code in quick CSS:

.header-scrolled .logo > a > img { 
display: none !important; 
}

Works great, except for that both of the logos show up when the browser’s width is small AND on mobile devices:

I am trying to hide the subtext logo, the second one, when the browser width is small enough for it to show up, or just on mobile devices. Having trouble figuring out where to put confiditional if if(wp_is_mobile() )

• This topic was modified 7 years, 7 months ago by sdsitetechdotcom.