How to make website with iframe responsive to screen sizes

Question

At the moment I have a website with an iframe as the main content and some graphs in a sidebar. However, when the screen size is changed, the layout is messed up.

I was struggling to make the iframe fit in the website as I can't add a percentage value in the html.

This is the html:

 .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> 

Answer 1

Hi @jamie you can use media queries for the responsive website in your CSS also use iframe's scrolling="no" attribute for the better user interface.

    <iframe src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
      frameborder="0" scrolling="no" allowfullscreen>
    </iframe>

Answer 2

You need not apply position: absolute; for iframe. Removing it will solve the issue.

 .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; overflow: hidden; max-width: 100%; background-color: #fafafa; } .container iframe { 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>