I’m having some issues getting a logo to appear correctly on mobile devices. It looks great in all browsers i’ve tested even with the viewport set small, but on both android and iOS the logo is being cut off. Can anyone see what i’m missing that would cause this?
I don’t have an iphone to test (only the emulator) but it looks like the inline height you have in the anchor inside the h1 is not being applied.
<a class="brand" style="background: url('/templates/strapped/images/logo.png') no-repeat; width:327px; height:95px;" href="/"> Helps On The Way</a>
Try giving the height in the css in the media query for that log at the small width and see if it makes a difference. There’s too much code for me to build a local demo to test I’m afraid.
e.g.
.brand{height:95px}
I don’t know if it will make any difference but worth a try.
Edit:
Ralph’s post also reminded me that webkit has a problem with scaling background images so you could also try -webkit-background-size:100%; in that inline style.