title: Issue on Adjusting Carousel Image Size on Bootstrap 3
body: <p>Can you please take a look at this <a href="http://prowebsolutions.ca/Daycare/" rel="nofollow noreferrer">link</a> and let me know what I am doing wrong here which make the image size shorter than side box on ONLY iPad Landscape (col-md-*) sizes!
  As you can see I almost have a perfect size for all devices but on ipad landscape view!</p>
  
  <p>Am I doing any thing wrong on calculating the image size? Do I have to fix it? or something wrong with my grid setting?</p>
  
  <p>Again testing on <a href="http://quirktools.com/screenfly/" rel="nofollow noreferrer">Screnfly</a> the image looks good on all devices until 12" and 10" Notepads and iPad landscape. (Of course the problem may continue to all smaller size devices but since I have made the infobox hidden, it is not clear here!? 
  <img src="https://i.stack.imgur.com/UNOj0.png" alt="enter image description here">
  Here is the code I am using</p>
  
  <pre><code>&lt;div class="well banbox"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-9 col-md-9 col-xs-12 banpic"&gt;
        &lt;div id="carousel-example-generic" class="carousel slide"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src=" http://placehold.it/900x398" alt=""&gt;
        &lt;div class="carousel-caption"&gt;
          slide 1
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/900x398" alt=""&gt;
        &lt;div class="carousel-caption"&gt;
          slide 2
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/900x398" alt=""&gt;
        &lt;div class="carousel-caption"&gt;
          slide 3
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt;
      &lt;span class="icon-prev"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt;
      &lt;span class="icon-next"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  
  
        &lt;/div&gt;
    &lt;div class="col-md-3 hidden-sm hidden-xs baninfo"&gt;
            &lt;ul class="list-unstyled"&gt;
          &lt;li&gt;
              &lt;div class="well list clearfix" id="lst1"&gt;
                  &lt;div class="col-md-12  col-lg-9 one"&gt;
                       &lt;h4 class="white"&gt;Our Programs&lt;/h4&gt;
                      &lt;h6&gt;A Place You Can Trust&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class="ol-md-2 col-lg-2 two hidden-md"&gt;&lt;span class="arrow" id="arr1"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
        &lt;ul class="list-unstyled"&gt;
          &lt;li&gt;
              &lt;div class="well list clearfix" id="lst2"&gt;
                  &lt;div class="col-md-12  col-lg-9 one"&gt;
                       &lt;h4 class="white"&gt;Safe Stay Space&lt;/h4&gt;
                      &lt;h6&gt;Ministry of Health&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class="ol-md-2 col-lg-2 two hidden-md"&gt;&lt;span class="arrow" id="arr2"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
            &lt;ul class="list-unstyled"&gt;
          &lt;li&gt;
              &lt;div class="well list clearfix" id="lst3"&gt;
                  &lt;div class="col-md-12  col-lg-9 one"&gt;
                       &lt;h4 class="white"&gt;About Us&lt;/h4&gt;
                      &lt;h6&gt;A Place You Can Trust&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class="ol-md-2 col-lg-2 two hidden-md"&gt;&lt;span class="arrow" id="arr3"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
        &lt;ul class="list-unstyled"&gt;
          &lt;li&gt;
              &lt;div class="well list clearfix" id="lst4"&gt;
                  &lt;div class="col-md-12  col-lg-9 one"&gt;
                       &lt;h4 class="white"&gt;Take a Tuor&lt;/h4&gt;
                      &lt;h6&gt;Visit Our Daycare online&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class="ol-md-2 col-lg-2 two hidden-md"&gt;&lt;span class="arrow" id="arr4"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  
       &lt;/div&gt;
  
        &lt;/div&gt; 
  </code></pre>