On this page, there's an image carousel (from Twitter Bootstrap) which shows a series of images and captions. All the images are the same height, but the element that contains the carousel caption will be a different height depending on the length of the caption text.This becomes a problem when the browser width is narrow (e.g. when viewed on a mobile device), because the difference between the heights of the captions becomes more pronounced as the window gets narrower. If you make the browser about 450px wide and scroll down beneath the carousel, you'll notice that the content underneath the carousel jumps up/down each time the image in the carousel changes in order to accommodate the smaller/larger size of the new image's caption. This makes it difficult to read any text below 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 putting the carousel at the very bottom of the page or disabling automatic cycling of the carousel images?
how to cope with content of variable height?
- Thread starter MCD
- Start date