-1

i am trying to make an iframe responsive, in order to be correctly viewed on mobile devices etc, and what i am doing, although it is working good on mobile devices, it ruins the iframe on normal displays.

the iframe is that

<div class="conti" align="center" >
<iframe id="extFrame" src="html5/Project1.html" height="600px" width=" 800px"></iframe>
</div>

and the css style is

<style>
.conti {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.conti iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

that above makes the iframe full width but i want it 800*600. any help?

Antonis Oulis
  • 31
  • 1
  • 1
  • 3
  • you declare iframe properties inline (height="600px" width=" 800px") and at the same time in css ( width: 100%; height: 100%;) ? please make your mind – florin.prisecariu Jul 03 '14 at 10:33
  • my problem is not exactly on how to make it. but what i did wrong. Anyway it is kind of duplicate you are right. – Antonis Oulis Jul 03 '14 at 10:33

2 Answers2

1

Just delete witdh and height properties defined on css styles and the iframe will be generated with your desired dimensions.

I hope it helps. But are you just giving one size for every device? This is not responsive at all... You have to add some media queries.

This is a good post with different media queries for Responsive Design:

Media Queries for Responsive Design

Ricardmc
  • 27
  • 6
-1

If you want it 800x600 then say you want it 800x600 instead of 100%x100%.

width: 800px;
height: 600px;
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335