Responsive iframe embed

[ncoyle]

I have been trying to embed the following  iframe into a portfolio page:

<iframe src=”//infogr.am/GUATEMALAN-ADULT-LITERACY-RATE–15-years-and-over-2005-2008″ width=”550″ height=”751″ scrolling=”no” frameborder=”0″ style=”border:none;”></iframe><div style=”width:550px;border-top:1px solid #acacac;padding-top:3px;font-family:Arial;font-size:10px;text-align:center;”><a target=”_blank” href=”//infogr.am/GUATEMALAN-ADULT-LITERACY-RATE–15-years-and-over-2005-2008″ style=”color:#acacac;text-decoration:none;”>GUATEMALAN ADULT LITERACY RATE  (15 years and over, 2005-2008)</a> | <a style=”color:#acacac;text-decoration:none;” href=”//infogr.am” target=”_blank”>Infographics</a></div>

I would like it to be responsive but can’t get it to work by altering the width and height to 100%.  I have tried this in swift page builder with the TEXT, RAW HTML and BOX options available but to no avail.  I can’t get it responsive.

I tried adding the following to the CSS stylesheet:

/* Responsive iFrame */

.responsive-iframe-container {

position: relative;

padding-bottom: 140%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

 

.responsive-iframe-container iframe,   

.vresponsive-iframe-container object,  

.vresponsive-iframe-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

And then embedding the iframe inside:

<div class =”responsive-iframe-container”>

</div>

And in the EXTRA CLASS NAME I refered back to the responsive-iframe-container………..

Still no joy.

 

Could you please advise me on how to add the iframe in a responsive format to this theme?

 

Thank you very much

 

[Cosmin – SUPPORT]

Hi,

We can’t really help with teaching HTML/CSS, but here are a few pointers:

– don’t specify width/height in your iframe tag
– use CSS to set them instead
– for responsive versions, use CSS @media queries to specify different sizes.

An example media query, for iPhones in portrait mode :

@media only screen and (max-width: 320px) {
/* your custom CSS here */
}

You can also use the Extra Class and style that class as I suggested above.

Regards,
————————————————————————————————————

Cosmin
Support Assistant