Trouble figuring out why my site takes up half the screen on iphone

I haven’t tested it on an android device yet because I don’t have one, but when I visit my site on my iphone it looks like the image below. I can’t figure out why it loads like that. The site is completely responsive, and I have this in the header:

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

enter image description here

Related posts

2 comments

  1. Inside the <header> element of your site, in this div:

    <div class="header-ads f-right">
    

    There is a 728×90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.

    Removing that google ad fixes the issue.

  2. Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.

    Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.

Comments are closed.