The JS code and Carousel code are both from the official code. All I do was to replaced the <img> with <div id="myDiv1"> (the Plotly plot object).
The issue is only the parent (the first) plot is represented in the correct size. Others are not responsive.
I tried to remove <meta name="viewport" content="width=device-width, initial-scale=1.0"> on the HTML head and the pages worked well. However, I do need the auto scale function.
Please review the code on CodePen and make your browser as phone size.
References:
- The JS code is from Plotly official sample: Responsive / Fluid Layouts in JavaScript
- The Carousel code is from BootStrap v5.1 official sample: Carousel
PS. img works well. Only the plotly objects are not responsive.