title: Responsive Carousel for height
body: <p>I have been fooling with this carousel for days. I am trying to make it responsive in the height but it keeps getting messed up and stretched real long. I read many things and tried many different techniques. Can anyone spot what I am doing wrong so hopefully I can move on from this lovely carousel or start actually putting images into it. The media queries were a last experiment for me and basically I just want it to resize proportionally on mobile and I am not quite sure of the screen size for that. I am guessing if my images are going to be sized to 1024 by 700 that I should use 700 height for medium and anything larger??</p>
  
  <pre><code>&lt;div class="container"&gt;     
  &lt;div id="portfolio"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-12"&gt;
  &lt;h1 class="display-3"&gt;Portfolio&lt;/h1&gt;
  &lt;p class="lead"&gt;Here are some examples of my latest works.&lt;/p&gt;
  
  &lt;div id="carouselPortfolio" class="carousel slide" data-ride="carousel"&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;div class="carousel-inner" role="listbox"&gt;
  
  &lt;!-- Images --&gt;
  &lt;div class="carousel-item active"&gt;
  &lt;img class="d-block" src="http://www.placehold.it/1024x700" alt="First 
  slide"&gt;
  &lt;div class="carousel-caption"&gt;
  &lt;h3&gt;Business Cards&lt;/h3&gt;
  &lt;p&gt;Here are some business cards I have made.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="carousel-item"&gt;
  &lt;img class="d-block" src="http://www.placehold.it/1024x700" alt="Second 
  slide"&gt;
  &lt;div class="carousel-caption"&gt;
  &lt;h3&gt;First Website in 1997&lt;/h3&gt;
  &lt;p&gt;I ran one of the top Mariah Carey fansites for six years (1998-2003) and 
  got to meet Mariah Carey multiple times, got 20+ autogaphs, got personal 
  phone messages from Mariah to put on my website and I enjoyed updating it on 
  a daily basis.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="carousel-item"&gt;
  &lt;img class="d-block" src="http://www.placehold.it/1024x700" alt="Third 
  slide"&gt;
  &lt;div class="carousel-caption"&gt;
  &lt;h3&gt;Billboard Designs&lt;/h3&gt;
  &lt;p&gt;I worked with SSMarketing Solutions and designed various marketing 
  materials for her clients. I got the chance to design and illustrate two of 
  their billboards that appeared on main highways in New Jersey.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--Carousel Inner--&gt;
  &lt;/div&gt;&lt;!--Carousel Example Slides Only--&gt; 
  
  &lt;!-- Controls --&gt;
  &lt;a class="carousel-control-prev" href="#carouselPortfolio" role="button" 
  data-slide="prev"&gt;
  &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt;
  
  &lt;a class="carousel-control-next" href="#carouselPortfolio" role="button" 
  data-slide="next"&gt;
  &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;!--column--&gt;
  &lt;/div&gt; &lt;!--row--&gt;
  &lt;/div&gt;&lt;!-- Scrollspy --&gt;
  </code></pre>
  
  <p>CSS:
  /* Carousel */</p>
  
  <pre><code>#carouselPortfolio img {
  min-height: 300px;
  min-width: 100%;
  }
  
  #carouselPortfolio &gt; .carousel-indicators &gt; li {
  border-radius: 0px;
  min-width: 25px;
  min-height: 10px;
  background-color: #9d9d9d;
  border: 1px solid black;
  margin-right: 10px;
  margin-left: 10px;
  }
  
  #carouselPortfolio &gt; .carousel-indicators &gt; .active {
  background-color: #5b9ed5;
  }
  
  #carouselPortfolio .carousel-caption {
  color: black;
  text-align: center;
  top: auto;
  }
  
  #carouselPortfolio .carousel-inner .carousel-item {
  max-width: 1024px;
  max-height: 740px;
  margin: auto;
  }
  
  /* Extra small devices (phones, less than 768px) */
  /* No media query since this is the default in Bootstrap */
  
  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { 
  .carousel-inner {
   max-height: 200px; 
  }
  }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { 
  .carousel-inner {
   max-height: 700px; 
  }
  }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: @screen-lg-min){ 
  .carousel-inner {
   max-height: 700px; 
  }
  }
  </code></pre>