0

I am having an issue relating to the amp-carousel. Each carousel slide will have a different height based on the content that is relating to the product.

I have set my carousel to have layout responsive and set a height like so:

<amp-carousel width="367" height="635" layout="responsive" class="o-wrapper fabric-gallery" type="slides" controls loop>

I am assuming using layout responsive will set the height to auto.

Would using something like flex-item be more appropriate?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
MattClaff
  • 685
  • 2
  • 9
  • 17

1 Answers1

0

Yes you can use flex-item since it will take the available space based on the flexbox model.

Notice that height=100% and width=100% are overridable defaults and are only there to ensure that the container indeed specifies display: flex. Alternatively, the element can force display: flex on the parent.

The flex-item it ensures that the element is not sporadically resized while also giving it a more flexible positioning options. It'd also allow the element to participate in the flexbox layouts.

Check this example on how to implement it in your page.

abielita
  • 13,147
  • 2
  • 17
  • 59