Make Logo Responsive / Better Margins

Hi

I am working on a site however the logo is much deeper than the std. Quark logo, I would like to be able to reduce the size of the logo for diferent viewports but i haven't had much luck so far.

The site is here http://joomdev.me/terratechnew

If u change the viewport size to tablet/smartphone the logo obscures the header text, ideally i would like to keep the logo the same size and simply have the text move below it,

I tried removing the logo and adding it to the header module but the page class resizes it to 100% width.


TIA
Kev

Hi

To resize logo You need to specify different widths for different screens. You can do this by using a css construction like:

Code: Select all

@media only screen and (max-width:1024px) {
#gkLogo img {
width: 200px;
}

@media only screen and (max-width:850px) {
#gkLogo img {
width: 150px;
}
}

@media only screen and (max-width:550px) {
#gkLogo img {
width: 100px;
}
}


above are just examples, so You will have to come up with dimensions which works best for You.