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

<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!  

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