Menu
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;
}
391
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
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.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
