Mobile theme logo problem 1.5.2.0

[FutureLED]

Does anyone know how to have a seperate logo for mobile theme? The logo on the site in question runs full width of the page but in mobile its squashed up to the left hand side, you can see what I mean here if you view through a mobile device www.mgplant.com/yard

Any assistance would be appreciated.

Edited December 19, 2012 by Wesellbulbs (see edit history)

[acaiberrykorea]

I found an inelegant solution to the problem, but it works. You need to change 2 files.

1- If "default" is still the theme you are using, it will be located at /themes/default/mobile/header.tpl, on line 68, you will have part of the html being generated that looks something like this:

 

... <img src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" ...

 

you need to change the {$logo_url} for a url of an image you want to use on your mobile site. for example:

 

... <img src="/img/logo_mobile.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" ...

 

2- Changing the image like this may cause issue with the mobile version of the css. The file where the sizes of the image are define located at /themes/default/mobile/css/jqm-docs.css. On lines 22 and 23 you have

 

#jqm-homeheader img { width: 235px; }

img { max-width: 100%; }

 

that's what you need to adjust if the image still looks a little weird after you replace it.

 

I know that the logo_url variable seems to be adding something to the querystring of the image based on the time (to prevent clientside caching issues I imagine?) so if someone has a better way of solving this, please tell us.

[idsdi]

I have adapted the solution slightly to be a little more elegant.  I simply edited the themes/default/mobile/css/jqm-docs.css file and changed the img{} definition to the following

 

#jqm-homeheader img { width: 235px; }
/*img { max-width: 100%; } */
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

 

Note: I didn't need to change the #jqm-homeheader img CSS definition.  This change means that the CSS respects the aspect ratio of the image when resizing...
 

Works nicely and resizes well when rotating phone etc.