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>

You might want to refer here, https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using. Please upvote if useful — Abhishek Mathur, Jul 31 '19 at 05:12
@AbhishekMathur thanks that is helpful - but how do I then make my sidebar the same height? — Jamie Vincent, Jul 31 '19 at 06:14

score 0 · Answer 1 · answered Jul 31 '19 at 05:37

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>

score 0 · Answer 2 · answered Jul 31 '19 at 05:37

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>

@JamieVincent when you try this, check the console. You have errors from the iframe page. One with service worker and one with same origin. You will need to deal this in that page. But, as far as the layout is concerned, its responsive. — Nidhin Joseph, Jul 31 '19 at 06:26

How to make website with iframe responsive to screen sizes

2 Answers2