1

I'm trying to show different logo for mobile devices and for desktop/tabs. How to achieve this ? I've tried the code from Display a different logo on mobile and desktop? but somehow it just does not work. It shows the logo while in desktop view, and no logo is shown in mobile view. I'm using the responsive mode in firefox to test. Below how I want the page to appear in mobile view.

simulated view

<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>
www.friend0.in
  • 269
  • 1
  • 2
  • 9

1 Answers1

0

Remove "!important" and probably your problem will be solved. "!important" should only be used when there is no other way to parse the code.

And as user "msi" commented above you also forgot to close the class="mobile" attribute.

imtws
  • 22
  • 5