User interfaces changes at 1000Px width and below, why? (responsive design)

Question

I'm optimizing my website for mobile devices at the moment, but ran into a problem. If i view the site on a mobile device or a small browser window some objects on the site wont have an effective width of 100% anymore, but others will. So you can scroll to the side and half of the content kinda sticks to the left. As Long as the width of the viewport is above 1000Px there are absolutely no problems. I use percent for measurement of the elements, so that shouldn't be a problem.

>1000Px screenwidth <1001Px screenwidth

The effect isn't obvious instantly, as there wont be a horizontal scroll bar, but you can click and hold at the right side of the site and pull it over. The real problem is, that the header gets pushed out to the side, as it is one of the objects, which still uses the "full" 100% width.

I have a media querie, which changes the header at 1000Px

@media screen and (min-width: 1000Px) {.mobilenav {display: none;}

If i disable this one, the problem is gone, however if i delete the only div using this class

☰

the problem is still there… The div does not stretch across the screen, i checked that and at this point i'm really out of solutions.

Here is the css for .mobilenav if it helps

.mobilenav {
    position: relative;
}
.mobilenav span {
    position: absolute;
    bottom: 10%;
}

user_7972933 · Answer

This may happen because of padding of your header element. You can check in example below it will be as width + padding

.container {
width: 300px;
height: 100px;
background: #ccc;
}
.article {
 width: 100%;
 height: 20px;
 margin-top: 8px;
 background: #999;
}


 article 1
 article 2

User interfaces changes at 1000Px width and below, why? (responsive design)

1 Answers