BRINE - Logo on mobile, but not on Desktop?

Hey there, pardon if this question has already been asked before.

I'm wondering if it's possible to have a site which uses the Brine template configured to use a logo when being viewed at mobile or tablet resolutions, and the regular site title be used if the site is being viewed from the desktop.

The logo for the site I'm working on is effectively a square. It's great for mobile views, but gets a bit small in the desktop view. I've tried increasing it size-wise, but that only makes it dwarf the other items in the header. The site title is too long to use in mobile view: it gets all bunched up and crowds the other header items, even when they're compressed for mobile.

Is it possible to have this configuration in Brine, or in any Squarespace template for that matter? Or am I better off trying to create a logo that's wider than it is tall, and therefore scales better?

Yes. You can use logo on mobile, and site title for desktop, with some custom code. You should share site url to check code. @FuriousWhisk

This sounds like what I'm looking for! Any advice would be appreciated. 

https://oval-green-mdps.squarespace.com/
Password: abibdevelopment

@abibacon Add to Home > Design > Custom CSS

a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    visibility: visible;
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 50px;
    display: inline-block;
}

On 11/4/2019 at 10:37 AM, tuanphan said:

@abibacon Add to Home > Design > Custom CSS

a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    visibility: visible;
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 50px;
    display: inline-block;
}

 

Is there a way of doing this for tablet too? 

Thanks in advance!