Bootstrap template site shrunk down too small on iphone


As my subject line says, the site works fine on Android but for some reason, on iphones it shrinks down to about a third of the screen on the left. The website is Any help or suggestions would be greatly appreciated.


1 Like

I think it may be your viewport tag, it does not set the initial scale. It should be something like this:-

<meta name=viewport content="width=device-width, initial-scale=1">

You should not disable user scaling either.


The problem can easily be seen on a desktop by adjusting the width of the browser window smaller and you will soon see that at less than 900px a great big horizontal scrollbar appears on the viewport!

This is caused by this image at 903px wide.

When the iphone encounters that image it has to shrink the rest of the page to make that large image fit in the smaller viewport which results in all the other content being squashed further. You must always eliminate any horizontal scroll in your page otherwise mobiles cannot cope.

Scale that image smaller or set a max-width of 100% on it to stop it breaking the layout.

img {max-width:100%}

As Sam said you have disabled user pinch and zoom so in one fell swoop you have rendered your site useless to all iphone users because of the image error. Had you left pinch and zoom alone users would at least be able to pinch and zoom and see some content but as it is now they can see virtually nothing at all.:slight_smile:


Thanks so much guys! That did the trick.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.