Iframe content is responsive but does not scale (or break) on mobile

Question

Hi, I have searched everywhere for an answer to this: (Any help would be greatly appreciated
I have a responsive landing page which has / needs an Iframe inside which will display a website which is also responsive and has a breaking point for mobile atleast. On any browser it works and looks fine, but if you view it on mobile, the content does not scale or respond to wrapper width and break to become it's original mobile view. It only scales the entire page down, ie: Text, too small to read and site within iFrame doesn't break to mobile view.
I need the content to break for mobile and adhere to it's own, original media queries. The surrounding page is fine and the wrapper is perfect.

Is there possibly some Javascript I could insert to make it work? Can I do this using plain css?

Here is a link to the page:

http://clients.foxps.com/lp/cps2.html

Notice; when scale width of browser, content of iframe breaks nicely BUT on mobile...not :(

Here is a code snippet of my HTML & CSS(MOBILE MEDIA QUERY):

@charset "UTF-8";

/* CSS Document */

html {
  max-height: 700px !important;
}
body {
  margin: 0 0 200px;
  /* bottom = footer height */
}
body {
  max-height: 700px !important;
}
.media-logo {
  width: 264px;
  height: 200px;
  background-repeat: none;
  margin: auto;
  top: 0;
}
.logo {
  padding-left: 15px;
  margin: auto;
  max-width: 264px;
  min-height: 220px;
}
/*Back button styling*/

header p {
  float: right;
  font-size: 40px !important;
  position: absolute;
  margin-right: 5px;
  bottom: 0;
  right: 0;
  padding-right: 10px;
  font-family: Calibri, Candara, Segoe, Segoe;
  Font being rendered: Calibri;
  color: #555555;
  font-size: 30pt;
}
header p a {
  text-decoration: none;
  color: #555555
}
header p a:hover {
  text-decoration: underline;
}
.back-btn {
  position: absolute;
  margin: 0 18px 15px 0;
  right: 10px;
  bottom: 10px;
  width: 150px;
  height: 110px;
}
.back-link {
  padding: 25px 35px !important;
  background: #405FAE;
  height: 40px !important;
  color: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.back-link:hover {
  background: #2f447b;
  border: solid 1px #2A4E77;
  text-decoration: none;
}
.back-link:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  background: #2E5481;
  border: solid 1px #203E5F;
}
/*Back button styling*/

/*Wrapper styling begin*/

.rapper-yo {
  max-height: 750px !important;
  margin: auto;
  padding: 5em 2em 2em 2em !important;
  background-color: #FFF;
  font: normal 100%/1.4 sans-serif;
  color: #515477;
  overflow-x: hidden;
}
iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 1.5px solid #666;
  box-sizing: border-box;
  transform-origin: center top;
  transition: transform .05s linear;
  backface-visibility: hidden;
}
/*Wrapper styling end*/

.main {
  padding-top: 150px !important;
  top: 200px;
  min-height: 400px;
  min-width: 460px;
  margin: auto;
}
body > footer:nth-child(3) {
  position: absolute;
  left: 0;
  bottom: 0;
  min-height: 320px;
  width: 100%;
  background: #555555;
}
center.foot {
  max-width: 100%;
  margin: auto;
  min-height: 120px;
  border-bottom: #A1A2A2 solid 1px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #555555;
}
center.foot nav {
  margin: auto;
}
#social-icon {
  width: 100%;
  margin: auto;
  height: 70px;
  position: absolute;
}
#social-icon .icons li {
  display: inline-block !important;
  padding: 0 3px;
  list-style: none;
}
.icons li a {
  margin-left: -5px;
}
.icons {
  width: 100%;
  height: 70px;
  margin: 20 10 0 10;
  padding: 0;
}
.icons li {
  marging: auto;
  padding: 0;
  float: left;
}
.icons li a {
  display: inline-block;
  list-style: none;
}
.icons li a:hover {
  opacity: 1;
}
#social-icon {
  min-height: 70px;
  max-width: 1090;
  padding: 0 10 0 10;
}
#social-icon > ul.icons {
  min-height: 70px;
  min-width: 250px;
  padding: 10 10 10 0;
}
ul > li > a:hover {
  opacity: 1;
}
.social-linkdin > a {
  background: url(../img/linkdin-icon.svg) no-repeat;
  min-height: 70px;
  opacity: 0.5;
  min-width: 70px;
}
.social-twitter > a:nth-child(1) {
  min-height: 70px;
  min-width: 105px;
  padding: 0 10 0 10;
  margin-left: 40px;
}
.social-facebook > a:nth-child(1) {
  min-height: 70px;
  min-width: 90px;
  padding: 0 10 0 10;
  margin-left: 20px;
}
.social-linkdin > a:nth-child(1) {
  min-height: 70px;
  min-width: 70px;
  padding: 0 10 0 10;
  margin: auto;
}
.social-twitter > a {
  background: url(../img/twitter-icon.svg) no-repeat;
  min-height: 70px;
  opacity: 0.5;
  min-width: 70px;
}
.social-facebook > a {
  background: url(../img/facebook-icon.svg) no-repeat;
  min-height: 70px;
  opacity: 0.5;
  min-width: 70px;
  margin-left: 15px;
}
#social-icon .table {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;
  min-height: 80px;
}
.icons li {
  padding: 0 5;
  width: 70px;
  height: 70px;
  display: inline;
}
#social-icon > ul {
  list-style-type: none;
}
#copyright > div.right > p {
  padding: 12px 20px 0 0;
  font-size: 35pt;
  line-height: 32pt;
  margin: 0;
  font-family: Calibri, Candara, Segoe, Segoe;
  Font being rendered: Calibri;
  color: #999999;
  color: rgb(153, 153, 153);
}
#copyright > div.left > p {
  padding: 12px 0 0 20px;
  font-size: 35pt;
  line-height: 32pt;
  margin: 0;
  font-family: Calibri, Candara, Segoe, Segoe;
  Font being rendered: Calibri;
  color: #EEEEEE;
}
#copyright > div.right {
  width: 62%;
  float: right;
  background-color: transparent;
  margin-right: 35px;
  height: 30px;
}
#copyright > div.left {
  width: 28%;
  float: left;
  margin-left: 35px;
  height: 30px;
}
#copyright {
  margin: auto;
  min-height: 120px;
  background: #555555;
}
#copyright.target {
  min-height: 130px;
}
center {
  top: 60px;
  padding-top: 65px;
}

<!DOCTYPE html>

<head>
  <link rel="icon" type="image/png" href="img/Fox-favicon.png" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel='stylesheet' media='screen and (max-device-width: 480px) and (orientation: portrait) ' href='css/mobile.css' />

  <link rel='stylesheet' media='screen and (max-device-width: 480px) and (orientation: landscape) ' href='css/mobile-land.css' />

  <link rel='stylesheet' media='screen and (max-width: 1200px) and (min-width:900px)(orientation: landscape) ' href='css/normal.css' />

  <link rel='stylesheet' media='screen and (min-device-width : 768px) and (max-device-width : 1024px) ' href='css/normal.css' />

  <link rel='stylesheet' media='screen  and (max-width: 2200px)' href='css/main.css' />


  <title>Fox Parrack Singapour</title>





  <!--Adobe Edge Runtime End-->
</head>

<body>
  <header class="logo">
    <div class="main-logo">
      <a href="http://www.foxps.com" target="_blank">
        <img class="media-logo" src="img/fox-logo.png" width="130" height="110" />
      </a>
    </div>
    <div class="back-btn">
      <p valign="bottom">
        <a href="http://clients.foxps.com/lp/" class="back-link">
          < Back</a>
      </p>
    </div>
  </header>
  <div style="clear: both;"></div>


  <div class="rapper-yo">
    <iframe src="http://marketing2.xmpie.net/CPS/Joe.Finn?section=orange" frameborder="0" allowfullscreen="true" allowtransparency="true"></iframe>
  </div>

  <footer>
    <center class="foot">
      <nav id="social-icon">
        <div class="table">
          <ul class="icons">
            <li class="social-twitter">
              <a target="_blank" href="https://twitter.com/FoxParrack" alt="Follow us on Twitter"></a>
            </li>
            <li class="social-facebook">
              <a target="_blank" href="https://www.facebook.com/pages/FoxParrackSingapour/165269563545341" alt="Follow us on Facebook"></a>
            </li>
            <li class="social-linkdin">
              <a target="_blank" href="http://www.linkedin.com/company/271071?trk=prof-exp-company-name" alt="Follow us on linkedin"></a>
            </li>
          </ul>
        </div>
      </nav>
    </center>


    <div id="copyright" class="target">
      <div class="left">
        <p><small><a href="http://foxps.com/cookies-policy" >Cookies Policy</a></small>
        </p>
      </div>
      <div class="right">
        <p align="right"><small>Copyright &#169; 2015 Fox Parrack Singapour. All rights reserved.</small>
        </p>
      </div>
    </div>

  </footer>

  <blockquote>&nbsp;</blockquote>
</body>

</html>

Is this what you're looking for? [Stack Overflow Post][1] [1]: http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe — Clive_Bigsby, Mar 30 '15 at 15:49
Hi, thanks. But I have already tried this, doesn't seem to work in this case, it just makes the dimensions even smaller. — Daryn Higginson, Mar 31 '15 at 10:39

Iframe content is responsive but does not scale (or break) on mobile

0 Answers0