Jump to content

BRINE - Logo on mobile, but not on Desktop?

Recommended Posts

Guest FuriousWhisk

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?

Link to comment
  • Replies 4
  • Views 616
  • Created
  • Last Reply
  • 1 month later...

@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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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!

Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.