Jump to content

Change The Maximum Height on Mobile & Desktop Separately of Custom CSS Header Logo

Go to solution Solved by DavidStewart,

Recommended Posts

<style> 
div.header-title-logo a {
content:url(*LINK*) !important;     
max-height: 71px;
</style>

Hi,

I'm using the above code to set a custom header image on just one of my pages, however the max-height only controls the height on desktop, meaning on a mobile the logo appears to big.

For reference the logo height on mobile for my header logo is usually 48px, my desktop height is usually 71px

How can I set a separate max-height to take effect on mobile separately?

Also - separate to this issue, but what is the best way of applying a custom colour to the header of one page only as well? I'd like to set the header background to a pastel green colour.

Thanks!  

Link to comment
  • Replies 2
  • Views 241
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted (edited)

Please use this css code : 640px is for mobile device. 

 


.header-title-logo img {
content:url(*LINK*) !important;     
max-height: 71px !important;

}


@media (max-width: 640px) {
 .header-title-logo img {
    max-height: 48px !important;
  }
}

Edited by DavidStewart
Link to comment
  • 2 weeks later...
On 6/30/2024 at 12:13 PM, DavidStewart said:

Please use this css code : 640px is for mobile device. 

 


.header-title-logo img {
content:url(*LINK*) !important;     
max-height: 71px !important;

}


@media (max-width: 640px) {
 .header-title-logo img {
    max-height: 48px !important;
  }
}

This worked perfectly, thank you!

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.