Kilvish Shakal Kilvish Shakal - 4 months ago 18
CSS Question

Making responsive iframe

I tried to create a responsive iframe, it renders good on pc but is not responsive if we consider mobile devices.
Here is my jsfiddle

Here is my HTML

<div class="outer">
<div class="noScrolling">
<iframe class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
</div>


CSS

.outer{
position: relative;
background: url(background-with-backdrop.jpg) no-repeat center;
background-size: 100% 100%;
//width:420px;
height:800px;
}
.inner{
position: relative;
left: 300px;
top: 75px;
width:1050px;
height:582px;

}

.noScrolling{
width: 1050px; /*or any other size*/
height: 800px; /*or any other size*/
overflow-x:hidden;
overflow-y:hidden;
}

Answer

are you trying to do something like this ? Check out this link the iframe in that page resizes according to the width of the viewport

check this out.. i sort of gave you my own implementation of your problem.

EDIT

I am going to try and explain what i did.

  • The key here is to use percentages rather than pixel. Pixels are are absolute and percentages are relative and seem to work better when things are changing with the viewport. and it seems this is a one page site, and the background seems to be full sized to the viewport, then it is a good idea to use vw and vh units for the width and height since they rescale the content of your size according to the size of the window.

Now if we look at the CSS, i have set the body as the container and given it a width and height of 100vw, and 100vh respectively.

Then everything else inside this container can start using a percentage of the dimensions of body.

body {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}
.outer {
  position: relative;
  background: url("http://wrb.farm/demo/background-with-backdrop.jpg") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.noScrolling {
  width: 100%;
  height: 100%;

}

.inner {
  position: relative;
  width: 54%;
  height: 73%;
  top: 9%;
  left: 23%;
  overflow: hidden;

}
<body>
    <div class="outer">
      <div class="noScrolling">
        <iframe scrolling="no" seamless="seamless" class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
      </div>
  </body>

Comments