logo graphics in the responsive theme [#1211614]

I have a question in regards to the use of a logo graphic in the responsive theme. I would like to have a different (maybe smaller) logo treatment for the "mobile" size versus the "default" size. This is properly represented by two different css files - mobile.css and subtheme-alpha-default.css. This would normally work if I set the logo graphic as a background image in the two different css files. However, since the site has a background image that is scaled appropriately as well.

Having different logo sizes (and/or treatments) for mobile versus default makes a lot of sense so what is the right way to do this?

Thanks.

Comments

Comment #1

JSCSJSCS CreditAttribution: JSCSJSCS commented 7 July 2011 at 14:20

You could use a media query in your CSS to target the the size screen you want to affect (Will not work in IE<9, but they aren't on mobile anyway)

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* Put CSS for iPad LANDSCAPE layouts in here */

.logo-img {
/*some positioning styles*/
}

.logo-img img {
/*your smaller mobile image*/
}
}

Comment #2

lagpro CreditAttribution: lagpro commented 8 July 2011 at 06:49

thanks. I had it right to begin with but I was working on the wrong css file. That's twice that I have done that :-( arg!
(it should work! it should work! - AHHHH! wrong css file)...

Thanks.