Making carousel image fit for mobile device in bootstrap - html

Question

I have created a basic website for a mates brewery, but when viewed on a mobile device, the carousel image is condensed and doesn't adjust to the size of the screen. Ive tried editing the CSS file, which in turn helped adjust the image when resizing on a PC, but didnt help with the mobile device..
the website is temporarily sitting here http://west.net16.net/
Thanks in advance
/* Carousel base class */
.carousel {
height: 100%;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="IMGS/header1.gif" alt="west city brewing">
<div class="container">
<!--<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>-->
</div>
</div>

Answer 1

Your carousel is not cycling the elements. It is just a static image.
if you need a static image - try a jumbotron instead. It sizes nicely to mobile and desktop devices.
if you need to use a carousel, I suggest to modify the classic carousel html script using a background image and adjusting the size in your css file accordingly.
here you will find an html example:
<div class="container">
<!-- Header Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
and your css example code:
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
bootply here
If you need you can remove the carousel indicators and its controls.

Answer 2

make the image a background to a div usuing url() in css file. Then use these styles.
background-repeat: no-repeat;
background-position: center 0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;