Logo problem with diffrent resolution of devices

[pulmol]

Hello,

My problem is concerning the responsive functions.

When i see the site on my screen (1920px / 1080) all is good.
When i see the site on my galaxy note 2, all is good.

But on many devices with lower resolution like nokia lumia or old laptop computer the logo doesn’t fit on the screen and is enormous (we see only the 2 first letter of the logo)

Information for my logo:

Type of file : PNG
Size of file : 321 kB
Resolution : 1000 × 148

link for the logo: http://moutonrose.com/wp-content/uploads/2014/05/mouton-rose-logo-final-e1399656657241.png

Link of website: moutonrose.com

Thanks by advance

[Ernesto]

Hi! I have tried the site in devices with different resolutions and I see that the logo adapts nicely in all screen sizes. Did you manage to solve this issue?

Cheers!

[pulmol]

Thanks for your reply.

No the problem is still there. (if you look to the attached file you see the problem on a nokia lumia). We have many persons who said the logo appears very small on the left of the screen or with another device very large (as attached file). That’s why i think it’s a resolution problem.

Is it possible that it came from png format instead jpg ?

thanks

[Ernesto]

Hi there! You can try the following code to adjust logo size:

#site-logo a img {position: relative;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
min-height: 15%;
min-width: 15%;}

You’ll need to adjut height/width to your taste, but in this way the image has a defined width percentage.
The image being a png should not affect the responsive features, only the image quality.

Cheers!!

[pulmol]

Hello ,

where i add this lines of code ? in functionsphp ? in style.css ?

Thanks

[pulmol]

Ok i find header area in style.css

It works.

Thanks

[Raghavendra]

You can paste the same in Custom CSS tab in theme options.

[pulmol]

Hello, i believed that the problem was solved but, i try to see my site on ipad and you can see the result on attached file. The logo appears stretched or very wide. What is special is that the logo is perfect on ipad home page of the site, and when i go on another page like “mes realisation” (portfolio page) the problem with logo begin.

Another question is for the litlle icon menu on smartphone device. It appears on superpose with the logo… Is it possible to move it to the left or under ?

Thanks by advance.

Pulmol

[pulmol]

Sorry problem with update size pics.

You ll find the pics above.

[Ernesto]

Hi! try out the following change in the Custom CSS Section of your Theme Options Panel:
#site-logo a img {position: static;}

Cheers!

[Raghavendra]

Can you pls post a temp login so that I can take a look. I would not worry too much about Nokia Lumia but would be really concerned if this happens in iPad. Probably the initial problem you had could be due to IE browser.

To resolve the issue of stretched logo, pls remove the following two lines from the code posted above –

min-height: 15%;
min-width: 15%;

They are not required as per my tests on my machine and those two lines are helping to stretch the image in an odd way. Hope this resolves the issue on all devices.

[pulmol]

This reply has been marked as private.

[Nexus]

I have put some css into the custom css of theme options. Pls check. I see the logo fine in my windows phone now (Samsung Focus). The menu toggle has been moved to the left (you can vary the values depending on your liking). Hope that helps! Thanks.

[pulmol]

This reply has been marked as private.

[pulmol]

This reply has been marked as private.

[Author]

Posts