div width 100 percent not working in mobile browser

Question

I am trying to do something that, I thought, was very simple. The header of a website I am building is a solid color that needs to span the entire width of the screen regardless of which browser it is veiwed in. What I have created so far works wonderful on desktops and laptops, but when I test it on a tablet or a mobile phone, the header does not span all the way to the right. The content inside of the header does span all the way however, which is really confusing to me. The only way I can get the header bar to span the entire width is by setting the position property to static, which is not what I need for this site, so that doesn't do me any good. Below is the CSS and HTML I am using. Could someone take a look at it and let me know what I am missing.

HTML:

<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->

CSS:

html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}

.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}

.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}

Depending on how the rest of your site is laid out, [this might be helpful for you](http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page). — John, Mar 29 '14 at 14:46
"The only way I can get the header bar to span the entire width is by setting the position property to static" Static is the default value for that property. Is it inheriting a different position property that you're not showing in your sample code? — Daniel Beck, Mar 29 '14 at 15:03
I apologize Daniel. I meant to say that the only way I can get the header bar to span the entire width is by setting the property property to "fixed", not "static". That was a typo on my part; I apologize. — DanAdams, Mar 30 '14 at 02:12
I have tried setting both a min-width and a max-width to 100% as well, but that is not helping. — DanAdams, Apr 01 '14 at 18:27

PJ Brunet · Accepted Answer · 2014-06-13T18:23:28.940

This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.

This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <head>...</head>)

Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.

UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:

<meta name="viewport" content="width=800" />

This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.

score 14 · Answer 2 · answered Jan 13 '15 at 14:58

14

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>

answered Jan 13 '15 at 14:58

JJD

50,076
60
203
339

score 2 · Answer 3 · answered Mar 29 '14 at 14:56

I haven't tested this out on tablet or a mobile phone, but I think the problem is in setting a fixed width to the "container" div. Since you have set 100% width for html, body and the header div, these will always occupy 100% of the width irrespective of whether it is a browser, a tablet or a mobile phone. However, this is not the case with the "container" div as it has a fixed width. Try resetting the width of the "container" div in this manner:

.container {
    width: inherit;
    margin: 0 auto;
    text-align: center;
}

score 0 · Answer 4 · answered Feb 29 '16 at 18:44

Building on PJ Brunet's answer, I had a similar styling problem, but wasn't getting enough versatility from changing the meta tags in the html head. Instead, I added minimum width values in pixels to the css. Using the original question as an example:

.header {
  /* restrict the smallest device size to this width */
  min-width: 475px;
  height: 200px;
  background-color: #ffffff;
  padding-top: 8px;
}

Then you can target the next conventionally sized device:

@media (min-width:641px) {
    .header {
      /* force devises with a smaller width to observe this style */
      min-width: 700px;
    }
}

Maybe not the best practice, but it will allow you to capture all devise sizes into more manageable groups to suit the the design.

score 0 · Answer 5 · answered Dec 05 '16 at 15:34

0

You can also give min-width to body. Something like body {width: 1200px;}, depending on your width settings. Some clients might want the exact copy of desktop in their mobile!.

answered Dec 05 '16 at 15:34

Mathew

168
2
12

div width 100 percent not working in mobile browser

5 Answers5

Linked