Logo Resizing for Mobile Site

[eviemarie63]

Hello!

I am working for a client on adjusting aspects of his website. Somewhere along the way the mobile logo changed. The website is http://www.nimblefoxproductions.com

I’ve tried adding a @media code or just a basic CSS code to have max-width:100%. The logo on the mobile site can adjust sizes it just doesn’t ever display the full logo!

Any help would be much much much appreciated!!!
Evelyn

[shaneisme]

Hmm… I’m not 100% sure what the problem is.

When I resize my browser down as far as it will go, the logo acts like it should. It’s retaining a max-width of 100% its parent. I’m also seeing the full logo.

Are you having an issue on a specific device or browser?

[eviemarie63]

Are you viewing through a phone? The issue is that the mobile logo does scale according to resizing your browser….yet the N of Nimble and OX of Fox is cutoff. Its almost like a zoom-out problem, but I don’t know how to fix it.

[shaneisme]

It always helps to make a reduced-test case.

Clearly something else is going on. I tested just a basic version on Codepen and it’s working fine on my phone.

http://codepen.io/drainpip/pen/DuiLC

[eviemarie63]

Its so odd! What kind of phone do you have if you don’t mind me asking? So you see that entire logo on your phone?

Thank you so much for your help I am not too terribly great at code yet and all the efforts I’ve made so far are just confusing me since none are working.

[shaneisme]

No, I’m sorry I wasn’t being clear.

On your website my phone (Nexus 5, Chrome) was also seeing the logo cut off.

In my reduced test case, it’s working fine.

Basically what that means is some other CSS somewhere in the site is causing it. You can fork my Pen and start adding CSS and other things to it and test to find out where your problem is :)

[Author]

Posts