I want the header div (containing the background and greeting text) to stretch to accomodate the text when the window is resized (expand along with its content). I tried adding overflow:auto and overflow:hidden to the header div as well as its parent container, but with no luck.
Are there conflicts in my code that are causing this not to work?
Here's a jsfiddle I created: https://jsfiddle.net/gxpwxhfh/
I have this html for the header portion:
<div class='wrap'>
<div id='header'>
<div id='about'>
<div id='hello'>
<h1>Hello!</h1>
</div>
<p id='message'>Lorem ipsum dolor<br />sit amet, consectetur<br />adipiscing elit.
</p>
<div class='button'>
<a class='btn' href='#portfolio'>Lorem!</a>
<a class='btn' href='#contact'>Ipsum!</a>
</div>
</div>
</div>
</div>
Styled by this css:
.wrap {
display: block;
float: left;
min-width: 100%;
overflow: auto;
}
#header {
display: block;
float: left;
background: #fff;
min-width: 100%;
width: 100%;
margin: auto;
min-height: 100vh;
background-image:url(http://i.imgsafe.org/81ed908.jpg);
overflow: auto;
}
#header, #footer {width: 100%;}
#about {
display: block;
margin: 0 auto;
position: absolute;
top: 24%;
left: 25%;
width: 48%;
text-align: center;
font: 300 3.3em 'Source Sans Pro', sans-serif;
color: #fff;
}
#hello {
display: inline-block;
font-weight: 700;
}
.button {
margin: 0 auto;
padding: 0px 0px;
}
.btn {
margin: 0 auto;
margin-top: 46px;
margin-right: 6px;
margin-left: 6px;
padding: 9px 27px 9px 27px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 17px;
color: #fff;
background: #2de0bc;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
}
.btn:hover {
background: #56edcc;
text-decoration: none;
}
.btn:visited {color: #fff;}
Added some media queries in css
@media(max-width:960px){
#about{
font-size: 2.5em;
}
}
@media(max-width:767px){
#about{
position: static;
margin-top: 30px;
}
}