ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Pinpoint
• May 15, 2013 at 1:46 am #4859
  ncoyle

  Member

  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

   

  May 15, 2013 at 12:00 pm #4894
  Cosmin – SUPPORT

  Member

  Post count: 3851

  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

• Back to forum

  Posted in: Pinpoint