[ad_1]
The CSS code provided will only alter the background of the p class and not the logo being called in header.php.
To address this issue, you can try the following revised code snippet. It is recommended to use a child theme to avoid losing your changes during future updates.
To update your header.php file, replace:
<p class="site-title"><a href="https://projectdmc.org/support/topic/different-logo-on-mobile-device/<?php echo esc_url( home_url("/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri() . '/img/logo.png';?>" /></a></p>
with:
<p class="site-title">
<a href="https://projectdmc.org/support/topic/different-logo-on-mobile-device/<?php echo esc_url( home_url("/' ) ); ?>" rel="home">
<?php if ( wp_is_mobile() ) : ?>
<img src="<?php echo get_template_directory_uri() . '/img/mobile-logo.png';?>" alt="Mobile logo" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri() . '/img/logo.png';?>" alt="Desktop logo" />
<?php endif; ?>
</a>
</p>
In this code, the wp_is_mobile() function checks if the user is browsing from a mobile device. If it returns true, the code displays the mobile-logo.png image, otherwise it displays the logo.png image.
Note: Make sure you have both logo.png and mobile-logo.png files in your theme’s img directory.
Thank you very much @abretado1985, appreciate your in depth reply! 🙂