Currently, my website features an iframe as the primary content with some graphs displayed in a sidebar. However, I am facing layout issues when the screen size is adjusted.
I have been struggling to ensure that the iframe fits properly within the website, especially since I am unable to specify a percentage value in the html.
Here is the HTML code:
.header {
background-color: #fafafa;
text-align: left;
padding-left: 25px;
padding-top: 15px;
}
.row {
display: flex;
}
.column.side {
flex-basis: 25%;
background-color: #fafafa;
}
.column.middle {
flex-basis: 75%;
}
.container {
position: relative;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width: 100%;
background-color: #fafafa;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="row">
<div class="column middle">
<div class="container">
<iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
frameborder="0"allowfullscreen>
</iframe>
</div>
</div>
<div class="column side">
<div style="height: 500px">
<h6>UNIT <span style="color: #3888db">BREAKDOWN</span></h6>
<canvas id="chart1" height="250px"></canvas>
</div>
</div>
</div>