Make content display correctly on landscape device - html

Question

I have created a splash page using Bootstrap, on different monitors it looks as expected and scales down and up.
However If keep the window small in height and expand the width it doesn't look as I want it to, this is the same when viewing on mobile device in landscape.
I have 2 sections which should display vertically 50% of the screen each however on landscape it doesn't reduce the size enough and it overlaps, is there a way to stop this?
The splash screen is here http://communitec.co/
And here is my code
CSS - http://pastebin.com/WvVh8c35
HTML - http://pastebin.com/V8d8FqUK
body,
html {
width: 100%;
height: 100%;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
}
.topnav {
font-size: 14px;
}
.lead {
font-size: 18px;
font-weight: 400;
}
.intro-header-two {
text-align: center;
color: #f8f8f8;
background: url(../img/headerOne.jpg) no-repeat center center;
background-size: cover;
height:50%;
}
.intro-header {
text-align: center;
color: #f8f8f8;
background: url(../img/headerTwo.jpg) no-repeat center center;
background-size: cover;
height:50%;
}
.intro-message {
position: relative;
}
.btn-av {
padding:10px 20px;
color:#fff;
border: 2px solid #fff;
background:none;
border-radius:4px;
margin-bottom:15px;
}
a .btn-av:hover {
background: #E9E9E9;
color:#000;
}
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- First Header Image -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message" style="margin-top: 60px;">
<img src="img/AVLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
<h4 style="margin-bottom: 25px;">Bringing technology into design</h4>
<button class="btn-av">Enter Site</button>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- First Header Image -->
<div class="intro-header-two">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message"style="margin-top: 60px;">
<img src="img/ITLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
<h4 style="margin-bottom: 25px;">Technology solutions for home and business</h4>
<button class="btn-av">Enter Site</button>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->

Answer 1

You will have to add overflow: auto to .intro-header & .intro-header-2 :
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/headerTwo.jpg) no-repeat center center;
background-size: cover;
height: 50%;
float: left;
width: 100%;
overflow: auto;
}
.intro-header-two {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/headerOne.jpg) no-repeat center center;
background-size: cover;
height: 50%;
float: left;
width: 100%;
overflow: auto;
}