Responsive Issues

Hello again,

In addition to the other issues I have posted (thank you again in advance for your help!), I need to know how to shrink my logo text and tagline fonts for mobile devices. At the moment I have had to use .em font sizes, but need to make more specific changes. I have tried using @media css definitions, however without success. Specifically, I need to make my #gkLogo.text and .gkLogoSlogan smaller font sizes when viewed on mobile devices as to allow room for the over canvas menu icon to sit on the same line. At the moment, the mobile menu icon is flowing over into a second row below my logo and slogan. I am attaching a screen shot. Thanks!

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:640px) {
#gkLogo.text > span {
    font-size: 12px;
}

#gkLogo.text .gkLogoSlogan {
    font-size: 10px;
}
}


Great, thank you for all your help!

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro