I have a row of Bootstrap columns col-sm-4 and col-sm-8. In col-sm-4 there is just text information. In col-sm-8 there is a Carousel with images as you can see here.
I am trying to fit my Carousel inside the column (col-sm-8) so that when the page is resized the Carousel will not shrink below the height of the column/row.
My question isn't a duplicate as my columns aren't a fixed height, if I add more text to the left column it will increase in size and the right will match its height because of .div-equalheightfix in my CSS, however the Carousel inside that div shrinks too small when below a certain size.
These images illustrate what I mean:
Current
Desired
And here is the code:
HTML
<div class="container" style="width:100%;background-color:#252525;">
<div class="row" style="display:table;">
<!-- text column (left) -->
<div class="col-xs-12 col-sm-4 div-equalheightfix div-aboutus">
<p>Text goes here.</p>
</div>
<!-- carousel column (right) -->
<div class="col-sm-8 hidden-xs div-equalheightfix">
<div id="myCarousel" class="carousel fade" data-ride="carousel">
<!-- indicators/buttons -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- images -->
<div class="carousel-inner clickthrough" role="listbox">
<div class="item active">
<img src="images/fader/img001.jpg" class="carousel-img" data-no-retina>
</div>
<div class="item">
<img src="images/fader/img002.jpg" class="carousel-img" data-no-retina>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ensures that both columns are always equal height */
.div-equalheightfix {
float: none;
display: table-cell;
vertical-align: top;
}
/* carousel css */
.carousel.fade {
opacity: 1;
margin: auto -15px auto -15px;
}
.carousel.fade .item {
opacity: 0;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
position: absolute;
display: block !important;
left: 0 !important;
top: 0
z-index: 1;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index: 2;
}
/* text-column CSS */
.div-aboutus {
padding: 2% 8% 6% 4%;
color: #F1F1F2;
line-height: 175%;
}
.carousel-img {
}
update: I can change the image height by adjusting the img element, however I have added a class for this .carousel-img. I'm not sure what to add in there to make the height automatically go inline with the height of the text column, min-height:100%; makes it the same height as the browser window and not the container. Any suggestions?
update #2: see my answer below for an alternative solution, it seems better to do this without using Bootstrap columns; I have edited the title to match.
