I'm having trouble trying to display different logos for mobile devices and desktop/tablets. I attempted to use the code provided on this thread about displaying a different logo on mobile and desktop, but it doesn't seem to be working for me. The desktop logo shows up fine, but the mobile logo isn't appearing when viewing the site on a mobile device. I've been testing this in responsive mode using Firefox. Here is how I want the page to look on mobile view:
https://i.sstatic.net/NXaON.png
<style>
.mobile {
display: none !important;
}
@media (max-width: 600px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
</style>
<div>
<img src="/img/logo_desktop.png" class="desktop" />
<img src="/img/logo_mobile.png" class="mobile />
</div>