Making carousel image fit for mobile device in bootstrap

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>