title: Bootstrap Carousel - Make caption responsive to window height
body: <p>I've got a Bootstrap carousel implemented on my page and for some reason I cannot get the caption text to re-position according to the size of the web browser.</p>
  <p>Here is my HTML code:</p>
  <pre><code>&lt;!-- =======================CAROUSEL=========================== --&gt;
  &lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class=&quot;carousel-indicators&quot;&gt;
      &lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
      &lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
      &lt;div class=&quot;item active&quot;&gt;
        &lt;img class=&quot;first-slide&quot; src=&quot;img/main-banner.png&quot; alt=&quot;First slide&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;carousel-caption&quot;&gt;
            &lt;h1&gt;Democratizing the Internet of Things!&lt;/h1&gt;
            &lt;p&gt;&lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;./index.php?d=splash&quot; role=&quot;button&quot;&gt;Try Splash&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;
        &lt;img class=&quot;second-slide&quot; src=&quot;img/banner-2.png&quot; alt=&quot;Second slide&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;carousel-caption&quot;&gt;
            &lt;h1&gt;Another Heading!&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;a class=&quot;left carousel-control&quot; href=&quot;#myCarousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
      &lt;span class=&quot;glyphicon glyphicon-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class=&quot;right carousel-control&quot; href=&quot;#myCarousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
      &lt;span class=&quot;glyphicon glyphicon-chevron-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm using Bootstrap CDN:</p>
  <pre><code>&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css&quot;&gt;
  </code></pre>
  <p>These are all my CSS changes I've made to the carousel:</p>
  <pre><code>.carousel-caption {
  position: relative !important;
  width: 550px;
  top: 210px;
  left: 380px !important;
  z-index: 600;
  max-height:177px;
  
  }
  .carousel-caption h1 {
      font-family: sans-serif !important;
      font-size: 44px !important;
      font-weight: 700 !important;
      line-height:36px !important;    
      color: #444 !important;
      margin: 0px !important;
      padding: 0px !important;
      text-shadow: 0px 0px 4px #fff !important;
      text-align: left !important;
  }
  
  .carousel-caption p {
      margin-top: 11px !important;
      font-size:18px !important;
      line-height:21px !important;
      color:#333 !important;
      padding-bottom: 11px !important;
      margin-bottom: 11px !important;
      text-shadow: 0px 0px 4px #fff !important;
      text-align: left !important;
  }
  
  .carousel-control.left, .carousel-control.right {
      background-image: none !important;
  }
  
  .carousel-indicators {
      left: 405px !important;
  }
  </code></pre>
  <p>This is what the carousel looks at full screen:
  <img src="https://i.stack.imgur.com/g7mSZ.jpg" alt="enter image description here" /></p>
  <p>And here's what happens as I start to change the size of the web browser:
  <img src="https://i.stack.imgur.com/e7UVx.png" alt="enter image description here" /></p>
  <p>I have tried all the different type of positions, but for the life of me cannot figure out what I'm doing wrong. Any help is appreciated!</p>