Mobile view Logo size + social icons problem

This is screenshot of my site from my iphone...

mobile-view.jpg

I need to make my logo smaller. I think the best way is to put some css code in mobile.css...
I would like to have logo+search+login+social icons in one row. What should I do? Change some parts of template layout, update css styles???

Thanks for help

Your site is:
http://www.volleycountry.com/
?

yes

Please read first about adding custom CSS:
http://www.gavick.com/documentation/joo ... -template/

You could use override.css and define so called media queries, for example:

Code: Select all

@media all and (max-width: 800px) {
  #gkLogo img {
    width: 80%;
  }
}

@media all and (max-width: 600px) {
  #gkLogo img {
    width: 60%;
  }
}


This way logo width for browsers with width less than 800px will be 80%, for less than 600px 60% etc.

The other thing You should do is:

Code: Select all

#gkSocial {margin-top: 24px; clear: none;}


and this code will keep all items in one line as long as they fit.