Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
FuriousWhisk

BRINE - Logo on mobile, but not on Desktop?

Question

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?

Edited by FuriousWhisk
Initial Revision

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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

 

Share this post


Link to post
  • 0
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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...