Responsive logo and mobile menu

[simondm]

Hi,

So I’ve got an issue and I couldn’t find any answer on the support forum (sorry)

http://www.propositoconsultores.com
Mobile version: the logo gets squeezed and doesn’t stay centered.

How can I make sure it stays in place and doesn’t get squeezed?
The problem appears on both Android and iPhone.

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
 #logo a:first-child{
   margin-top:-80px !important;
   float:none !important;
 }
}

Thanks
Mohammad

[simondm]

Hi Mohammad,

Thanks for that but it doesn’t work. It actually makes it worse on mobile.
Now not only does it stretch like before, but it is also misplaced (way too high and part of the logo is missing)

Could you please have a look? I’ve left the CSS with your changes. Feel free to connect to my admin and make changes to custom CSS if you need…

Thanks

Simon

[Mohammad – SUPPORT]

Hi,
Please remove last css code and use this new custom css code:-

@media only screen and (max-width: 767px) {
 #logo a:first-child{
   margin-top:10px !important;
   float:none !important;
 }

#logo a.mobile-menu-show{
margin-top:-80px !important;
}
}

Thanks
Mohammad

[simondm]

Hi again Mohammad,
I still see the same problem. Could you please try to load the website on an iPhone or Android? You will see the logo gets squeezed compared to what it should be (and how it looks on desktop).
Thanks for your help

[Mohammad – SUPPORT]

Hi,
Please attach marked screenshot image.
Thanks
Mohammad

[simondm]

Here it goes, from my Android phone (the same happens on iPhone).
If you compare it to desktop version, you will see the logo is still squeezed.
http://www.propositoconsultores.com

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Seems fine now?

– Kyle

[simondm]

No it’s not. I’m surprised you even ask. If you compare between the screenshot I sent you and the desktop version, you will notice the logo is squeezed in mobile version. You can even reduce the size of the desktop window to realise that.

Here’s another picture to show you the difference between the two logos (one in vertical mode on my phone, the other one in horizontal). This is something I need to solve ASAP now as my client is really annoyed now because of the delay.

Thanks

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

#logo img, #logo img.retina {
  max-width: 300px;
}

– Kyle

[simondm]

Awesome, thanks Kyle, once again you got it right at first try!

Have a wonderful day,

Simon

[Rui Guerreiro – SUPPORT]

No problem. Thanks Kyle
-Rui