Bootstrap site: Logo Trouble on Mobile Devices

[MainStWebGuy]

Hello all,

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?

link: cust2.mainstreetinc.us

[ralph.m]

Not sure if this will help, but it's worth adding this to your styles to see if it makes a difference:

@media only screen and (min-width : 320px) and (max-width : 480px) {
	body {-webkit-text-size-adjust: none;}
}

[Paul O'B]

Hi,

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.

[MainStWebGuy]

thanks both of you. I'll try each of these and report back.

thanks again!

[MainStWebGuy]

@Ralph.m - i added that to my CSS but will have to try it out on my emulator when i get back to the office on monday.

@PAul O'B - i'll have to wait to apply your suggestions till i'm back monday too. I see your point thought... thanks for the input!

[MainStWebGuy]

adding teh height to the css worked great. Thanks guys