Jacob Miller Jacob Miller - 2 months ago 13
CSS Question

Bootstrap Carousel in mobile view image

Hello I have a problem with Bootstrap in mobile view. When ever I am in mobile view the image is responsive but its to long for the page and I have to scroll through to see it its cut out.
Mobile view.

I would like it so that the whole image "fits in".
Here is the website:
http://edslab.esy.es/Screen-Brodyr-AB-master/index.html



#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;

}



.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
/*navbar colour*/
.navbar-default {
background-color: #177f5e;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000000;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #000000;
}

@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
}

/*whitespace*/
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar {
margin-bottom: 0px;
}

/*bildspel*/
.carousel {
height: 1000px;
margin-bottom: 70px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 1000px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 1000px;
}
/*textstorlek.*/
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}


.carousel-caption i {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
/*Mer utrymme mellan bilderna.*/
.featurette-divider {
margin: 80px 0;
}

/* scrollUp */
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}
/*Google maps*/
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Screen Brodyr i Kristianstad AB</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Om oss</a>
</li>
<li><a href="textiltryck.html">Textiltryck</a>
</li>
<li><a href="transfertryck.html">Transfertryck</a>
</li>
<li><a href="brodyr.html">Brodyr</a>
</li>
<li><a href="#digitaltryck">Digitaltryck</a>
</li>
<li><a href="tampotryck.html">Tampotryck</a>
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>

</ul>
</div>
</div>
</nav>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<div id="bildspel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-target="#bildspel" data-slide-to="1"></li>
<li data-target="#bildspel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal">
<div class="container">
<div class="carousel-caption">
<h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
<p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal2.jpg" alt="Maskin">
<div class="container">
<div class="carousel-caption">
<h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="image/lokal2.jpg" alt="lokal2">
<div class="container">
<div class="carousel-caption">
<h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#bildspel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#bildspel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>




Answer

remove the height

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  //height: 1000px;
}
Comments