CODEWITHSUNDEEP
htmlcss
Mike B
Mike B

Reputation: 2776

Element width: 100% out of screen

I have a weird problem. I set my top menu to width: 100%, but while loading, it goes out of screen (to always 522px).

Debug

I stopped page load with debugger; in console. Element's computed width is 522px. Clicking on that brings me to css width: 100%. Everything in the page stays within page width except the menu.

CSS

#mobile_header {
    vertical-align: middle;
    position: fixed;
    background-color: #5d3026;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    z-index: 99998;
    box-sizing: content-box;
}

Weird part
It goes out of bounds only while loading. Whenever page finishes loading, it goes to normal 100% of full screen size. No additional JS affect this. No CSS is loaded (after the page load pause). I've also deleted all the contents from within, changed ID in html and css (so really no scripts would affect it), cleared cache. Still goes to weird 522px (that is translated from 100%).
I know it's a wild shot, but does anyone has any guess of what could cause such a situation (on all browsers)?

enter image description here

Upvotes: 2

Views: 5056

Answers (3)

Mike B
Mike B

Reputation: 2776

At the end it turned out that my header (separate file from content) had another item with static length (50em) and visibility:hidden so as I looked in the page, i couldn't find anything.
Noticed the cause only after taking apart all the header file.
Long story short - if width: 100% is going out of screen and parents are normal size, there MUST be something static size in the content stretching it out. Thorough search will help.

Upvotes: 1

user4994625
user4994625

Reputation:

You have meta viewport in your HTML for adjust the scale in mobile browsers? 

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

Upvotes: 0

ixpl0
ixpl0

Reputation: 756

For fixed elements you can use left: 0 and right: 0 for 100% width

#mobile_header {
    vertical-align: middle;
    position: fixed;
    background-color: #5d3026;
    top: 0;
    left: 0;
    right: 0; /* <= */
    height: 50px;
    z-index: 99998;
    box-sizing: content-box;
}

Upvotes: 4

Related Questions