Text Logo display on mobile

Hello,

I'm having trouble with getting the text logo to display smaller on mobile screens.
Instead of resizing and the font size becoming smaller it splits onto two lines which means the logo and slogan sit over the page content.

I've tried adding code to override and make the logo a smaller font size on mobile. This works on mobile but messes up all the fonts on larger screen sizes.

My site is at http://www.kate.zebracreative.co.nz

Thank you

Hi

Please add this code to override.css

Code: Select all

@media only screen and (max-width:600px) {
#gkLogo.text {
    font-size: 50px;
}

#gkLogo.text .gkLogoSlogan {
    font-size: 15px !important;
}
#gkHeader {
    min-height: 95px;
}
}