Bootstrap Responsive container gets height cropped - css

Question

I am quite new to Bootstrap. I tried to create a boostrap slider that contains on the left side a container with a logo, some text and on the right side a login form. Unfortunately my code is not working properley and my logo and the html form gets cropped once the browsers has a reduced resolution shrinks.
Here is my code: https://jsfiddle.net/bebetxx/z7w2bbso/3/
my CSS
.blue-container
{
color: white;
background-color:#3C8DBC;
}
.blue-container h2,p
{
color: #D2D6DE;
}
.black-container
{
background-color: #2D2D2D;
}
.black-container h2,p
{
color: #BBBBBB;
}
.image-container
{
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg") no-repeat center center scroll;
background-size: cover;
min-height: 350px;
height: 350px;
overflow: hidden;
}
/*SLIDER HEADER
============================================================*/
.slider {
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg")no-repeat center center scroll;
background-size: cover;
min-height: 450px;
height: 300px;
overflow: hidden;
}
.slider-wrap{
padding: 10px 0px;
}
.slider-img{}
.slider-img img{
width: 300px;
height: 500px;
}
.slider{}
.slider-content{
padding-top: 80px;
}
.slider h1 {
margin: 0 0 20px 0;
font-size: 50px;
color: #fff;
text-transform: uppercase;
line-height: 60px;
font-weight: 700;
}
.slider h2 {
font-family: 'lora', serif;
font-style: normal;
color: #fff;
text-transform: capitalize;
font-size: 27px;
text-shadow: 2px 5px 4px #000000;
}
.slider p {
margin-bottom: 25px;
color: #fff;
}
.top-link {
margin-top: 60px;
}
.top-link a{
padding: 20px 30px;
border-radius: 3px;
background: #fff;
font-weight: 700;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
transition: all .3s linear 0s;
}
.top-link a i{
color: #00AEFF;
font-size: 25px;
margin-right: 10px;
}
.top-link a:hover{
background: #00AEFF;
color: #fff;
}
.top-link a:hover i{
color: #fff;
}
.logo-slider {
position:relative;
width: 100% !important;
background-size:cover;
padding-bottom: 35%;
background-repeat: no-repeat;
background-size: auto;
max-width: 100%;
}
<!-- Main content -->
<!-- slider section -->
<section class="slider">
<div class="slider-wrap" >
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1 "><div class="logo-slider" style="background-image:url(http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png)"></div><h2>Connect, discover & change the world</h2><ul class="top-link list-inline"><li><i class="fa fa-android"></i> Register</li></ul></div><a name="loginbox"></a>
<div id="loginbox" style="margin-top:10px;" class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" action="http://127.0.0.1/login#Login" role="form" method="post">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<input type="hidden" name="val" value="checkin">
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input type="submit" value="Login" class="btn btn-success">
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account?
<a href="http://127.0.0.1/#Registration" <!--onClick="$('#loginbox').hide(); $('#signupbox').show()" -->
<strong>Sign Up Now</strong>
</a>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div> <!-- row end -->
</div> <!-- container end -->
</section>
<section id="counter-area" class="blue-container">
<div class="container">
<div class="row">
<div class="heading-inner text-center">
<h2 class="sec-title">Register to <span style="color:white !important"><?php if (isset($g_sWebsiteName)) echo $g_sWebsiteName ?> </span> </h2>
<p><strong>Register right away to this amazing community</strong></p>
<?php
$this->view('registration_box');
?>
</div>
</div> <!-- heading row end -->
</div> <!-- container end -->
</section>

Answer 1

thanks to #Skelly the 2nd problem was that the main slider has a height:300px limit.
The 1st problem was solved using a instead of the div logo used