Container width not matching viewport width on mobile device

Question

I recoded my site for responsive design and set the HTML viewport, javascript, and CSS for the outer container div as shown below. On mobile browsers (Opera and Firefox) I have the following problem:

• In portrait mode (only) the page loads correctly but the window allows scrolling to the right where there is a column of blank space outside the page-container. I can pinch zoom out so that I can see the column of space. Setting minimum-scale=1 only prevents the pinch zoom out, but you can still scroll to the right.

Setting overflow-x prevents scrolling to the right but this seems dangerous (If there is data to the right for whatever reason, you want to be able to get to it).

Notes:

• Landscape mode works correctly.

• Desktop mode is correct except for a tiny bit of scrolling to the right. The more I zoom in however (viewport approximating mobile and beyond), the more the blank space on the right increases.

Any idea why this space to the right and how to get rid of it?

HTML

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

CSS (relevant)

.page-container {
    position: relative;
    width: 100%;
    min-width:240px;
}

JS

var jmq = window.matchMedia("screen and (max-width: 610px)");
jmq.addListener(jmqListener);

function jmqListener(jmq){
    if (jmq.matches || window.innerWidth < 611 ) {
        //Mobile or zoomed in desktop - resize controls
        ...
    } else {
        // full desktop site
        ...
    }

A picture is worth a thousand words - the extra space is on the right:

Answer 1

You have fixed widths on some of the elements in your header.

.sitemessage h2 has a fixed width of 470px

.sitename has a fixed width of 475px

Setting those widths to auto will correct the issue.