How can I add a different logo for mobile devices using custom CSS?

Question

I've built a site for a small business but the limits of the stock options for customization are limiting the completion of the project. I need to add a second logo that only displays in mobile sites. I have seen some answers on the SquareSpace answers site, but none of them have worked thus far. Has anyone had experience with this area, and if so how might this be done with the CSS editor?

Answer 1

You first set the mobile logo image with a rule in CSS:

.logo {
    background: transparent url(../img/mobile-logo.png) center no-repeat;
}

Then you'll need a media query:

@media (min-width: 768px) {
   .logo {
      background: transparent url(../img/logo.png) center no-repeat;
   }
}

Of course change that logo rule's positioning and size to whatever makes sense in your case.

Answer 2

You can do this by creating two CSS class hidden-xsd and visible-xsd (xsd= Extra small devices Phones ), you can create those classes or use OK-grids

<div class="logo">
 <h1>
   <a class="hidden-xsd" href="#" title=""><img src="des_logo.png" alt="" title=""></a>
   <a class="visible-xsd" href="#" title=""><img src="mob_logo.png" alt="" title=""></a>
 </h1>
</div>

CSS class

@media only screen and (max-width:768px) {
.hidden-xsd{display:none!important}
.visible-xsd{display:block!important}
}