How to deal with variable height content?
On this page there is a carousel of images (from Twitter Bootstrap), which shows a series of images and titles. All images are the same height, but the element containing the carousel title will have different heights depending on the length of the subtitle text.
This becomes an issue when the browser width is narrow (for example, when viewed on a mobile device), as the difference between the heights of the labels becomes more pronounced as the window gets narrower. If you make the browser 450px wide and scroll down under the carousel, you will notice that the content under the carousel jumps up / down every time the image in the carousel is resized to accommodate the smaller / larger size of the new caption image.
This makes it difficult to read any text under the carousel (on a small screen) because the content jumps up / down about every 5 seconds. Is there a solution to this problem other than placing the carousel at the very bottom of the page or disabling the auto-cycling of the carousel images?
source to share
Hopefully by giving a minimum height for the div. carousel-caption might work. If not, try specifying the exact height on small devices using media queries.
First way:
.carousel-caption {
min-height: 300px !important;
}
Second way:
@media screen and max-width:xxxpx
{
.carousel-caption {
height: 300px !important;
}
}
It might have some blank space at the bottom for a small paragraph, but there is no way out. This will at least prevent it from rising.
source to share
If you say the caption container should be responsive to its children (number of characters to display), you can try what @Darshan suggests and the overflow: hidden;
css attribute , or you can set the caption container to an absolute position within its relative parent.
For example,
<div class="relative" style="position: relative">
<div class="child" style="position: absolute; bottom: 0; left: 0;">
<p> My text yadda yadda yadda... </p>
</div>
<div style="clear: both;"></div>
</div>
Setting a parent container to relative
resets the borders for its children, and all children of the elements will snap to the closest parent with a position relative
.
This way the content will still be displayed, but it won't fit into the rest of the content on the page unless the relative parent has a height specification.
source to share