Bootstrap carousel is not responsive

Question

I am working on a simple landing page which has a carousel in top of it. I've added a headline and a textarea inside the caption. The images has a height of 547px.

The problem is that the carousel is not being responsive. I just can see the bottom part of the caption with the submit button on my phone.

    <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="img/dog-cat.png" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>Licensed Veterinarians ready to answer your questions, 24 hours a day</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form></p>
      </div>
    </div>
    <div class="item">
        <img src="img/vet-dog.png" class="img-responsive" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>Ask your questions and have them answered for free</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" onkeyup="count()" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>   
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form>
        </p>
      </div>
    </div>
    <div class="item">
        <img src="img/kittie.png" class="img-responsive" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>No waiting room necessary</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>       
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form></p>
      </div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

  </div><!-- carousel -->

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</ol>

And the CSS:

#myCarousel {
margin-top: 50px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}


.carousel-caption {
    right: 20%;
    left: 20%;
    bottom:20%;
}

Here is a live link to the website: http://www.vetrounds.com/index.php

Any help would be greatly appreciated!

Answer 1

You'll need to do some more research to make it "truly" responsive, make form and things more fluid, but here's a quick fix. Specify static height to class carousel-inner (say height: 250px;), then height 100% to .carousel-inner > .item, then height 100% to .carousel-inner > .item > img, .carousel-inner > .item > a > img

I'm providing sample for responsive view (hint: use media query, do not set it for all screen sizes):

.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
height: 250px;
}

.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
height: 100%;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
height: 100%;
}

Then make the font responsive, use em values to override pixel values (or perhaps use em values for all versions?)