3

How can we design an iFrame that play nice with responsive designs without much efforts from the iFrame user?

Eg: http://openspeedtest.com/Get-widget.php

To make it responsive we need to use the following CSS on Parent Page.

> @media (max-width: 1200px){
> #iframeTest{ transform: scale(.7);
> -ms-transform: scale(.7); /* IE 9 */
> -webkit-transform: scale(.7); /* Safari and Chrome */
> -o-transform: scale(.7); /* Opera */
> -moz-transform: scale(.7); /* Firefox */  width:100%;}
> 
> } @media (max-width: 655px){
> #iframeTest{ transform: scale(.7);
> -ms-transform: scale(.7); /* IE 9 */
> -webkit-transform: scale(.7); /* Safari and Chrome */
> -o-transform: scale(.7); /* Opera */
> -moz-transform: scale(.7); /* Firefox */   margin-left: -15%; width: 760px; top:-100px;}
> 
> } @media (max-width: 419px){  
> #iframeTest{ transform: scale(.5);
> -ms-transform: scale(.5); /* IE 9 */
> -webkit-transform: scale(.5); /* Safari and Chrome */
> -o-transform: scale(.5); /* Opera */
> -moz-transform: scale(.5); /* Firefox */ top:-130px;}
>            }

Is there is a way to design an iFrame page that play nice on responsive design without adding additional CSS?

With Javascript can we find the parent document current width and align the elements in my iFrame page accordingly?

Lazar Nikolic
  • 4,261
  • 1
  • 22
  • 46
Vishnu
  • 741
  • 1
  • 7
  • 24
  • Since you don't want to add additional CSS and want to use JavaScript for making the iframe responsive, can you please post what you have tried so far using JS and we'll help you from there. – AndrewL64 Sep 22 '18 at 08:25
  • This may be an useful answer: [Adjust width and height of iframe to fit with content in it](https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it) – enxaneta Sep 22 '18 at 08:46

0 Answers0