I have an amp-carousel containing slides of div's each with a varying amount of text (not images).
Due to the varying amount of text in each slide and the fixed height I am unable to get a ratio that will be responsive. So I either show all text with huge spaces below or have text being cut off.
I'm trying to achieve where the carousel's height will adjust depending what inside it.
I tried other layouts with the same result.
Anyone have a way around this?
<amp-carousel height="180" width="790" layout="responsive" type="slides">
<div class="review">
1 paragraphs of text
</div>
<div class="review">
5 paragraphs of text
</div>
<div class="review">
4 paragraphs of text
</div>
</amp-carousel>
The reason why a carousel's height has to be specified is to prevent content jumping under the carousel depending on the selected page, so there's no way to avoid that.
One workaround is to have a fixed height and use amp-fit-text:
<amp-carousel height="500" layout="fixed-height" type="slides">
<div class="review">
<amp-fit-text height="500" layout="responsive">
1 paragraphs of text
</amp-fit-text>
</div>
<div class="review">
<amp-fit-text height="500" layout="responsive">
5 paragraphs of text
</amp-fit-text>
</div>
<div class="review">
<amp-fit-text height="500" layout="responsive">
4 paragraphs of text
</amp-fit-text>
</div>
</amp-carousel>
This allows you vertically center the text, modify text size and/or cut it off depending on the amount of text inside.