Hi

I have a local site set up with the omega theme. i am using a full site (as it seems to render fine on pad devises) and a mobile site for devices smaller than 500px.

All looks ok except for the logo. I am using the standard drupal logo.png file. It changes size as you change the browser width fine for the mobile site on safari and chrome. But the logo stays the same size on firefox and ie9 and looks bad. I am looking for a workaround solution if this is a usual bug.

Maybe setting up the css for the logo as a set size for the mobile theme.

I have not tested it on any live mobile devices yet.

Has any else encountered this issue.

Thanks in advance
Jimmel

Comments

Jimmel’s picture

Jimmel commented

Just to add. I am using the logo.png file but I have replaced the drupal logo file with my own logo for the site. If that help anyone.

Jimmel’s picture

Jimmel commented

So here's an update.

I had a search box in the same branding region. So when I set that to display: none in the mobile.css and display:block in the fullsite.css the logo in firefox now re sizes ok. (i don't need the search box on the mobile site)

I also need to put in an extra width:100% aswell as max-width for the image to get IE to resize the logo. However this only works for IE9 and with width:100% in the file IE8 does not show the logo at all and IE7 shows a huge size logo.

Can we get rid of IE please.

The debugging continues.

damiandab’s picture

damiandab commented

I have also the same problem , by default the images don't stretch. I could fix that by setting for container(where is image) the width:100% and for the image self the max-width:100%

Argus’s picture

Argus commented
Title: Omaga mobile theme resizing logo in safari, chrome but not firefor, ie9 » Crossbrowser handling of images
Version: 7.x-3.0-beta2 » 7.x-3.x-dev
Component: Miscellaneous » Code
Category: support » feature

Being bold here. This should be checked, and not only for the logo. It should be possible to drop images in a zone and re-sizing should be handled out of the box.

Anonymous’s picture

Anonymous (not verified) commented

I found a problem on my site with the logo resizing in funky ways and inconsistently on differing browsers. What I found was that the dimensions are not assigned to the image inline. So when some browsers look at the image (in my case Chrome) and they resize to say 50%, the browser stores the new dimensions as the main dimensions, so when you try to go back to 100%, the browser thinks 50% is the new 100%. I came up with a few fixes to this issue.

1.) Pull the page.tpl.php into your subtheme so that you can add the dimensions inline to the <img> tag. If this is the only reason you are overriding the tpl file, it seems silly to me to do it this way.

2.) Set the size of your image file using px in your CSS files. For my specific purposes, I have 3 breakpoints that I can break down to wide, normal and mobile. So I set the appropriate size for my logo in my global and specific CSS files for the 3 necessary sizes.
* this is the solution that I used *

3.) Set the size of your image in global.css, then you can use %s in your other CSS files to change the size as it scales with the browser or is viewed in different devices.

I hope this helps those of you who are looking for an immediate fix.

As far as a permanent fix to this solution getting added into Omega. My recommendation is to either read the logo.png for the dimensions of the file and insert them inline or allow an area where logo dimensions can be declared in the Omega UI. Also allowing sizes to be added when uploading a logo through the Omega UI should be added.