title: CSS - Reponsive Bootstrap Carousel in SharePoint Web Part
body: <p>I just want to preface this with while Bootstrap carousel is being used, it's been greatly customized (though not by me) to be used in a SharePoint web part. I feel like that's important to note since there's potentially a lot going on in this particular environment that does/could affect the CSS.</p>
  
  <p>That being said, I'm having troubles making the Bootstrap carousel responsive.  I moved a lot of the styles around, but this is the latest iteration:</p>
  
  <pre><code>#Carousel { 
  max-width: 400px; 
  }
  
  @media screen and (max-width: 926px) {
  
  #Carousel { 
  position: relative; 
  width: 100%; 
  height: 0; 
  padding-bottom: 40%; 
  }
  
  #Carousel .carousel-indicators, #jbCarousel .carousel-inner, #jbCarousel .control-container { 
  position absolute; 
  width: 100%; 
  }
  
  }
  </code></pre>
  
  <p>I want the #Carousel container to be at most 400px; I tried to keep its aspect ratio, too.  This doesn't work, what happens is that it stays 400px no matter how the window is resized.  And since the children I set above are at <code>width: 100%</code>, they're also set at 400px, so nothing actually changes in size.</p>