Display a different logo on mobile and desktop?

Question

I\'m looking to change the logo on my header on a mobile. This is the code from the current header that shows up on both the desktop and the mobile (on desktop it\'s the lin

Answer 1

You can put both images in the element, and show / hide with CSS media queries. For example...

HTML:

CSS:

@media all and (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

If this is a project you're working on from scratch, consider using a front end framework like Bootstrap - there are plenty of great utility classes to handle responsive functionality.