-1

I’m currently working on this page: http://www.prosperitycapitaladvisors.com/become-a-prosperity-capital-advisor/ with an embedded javascript form called infusionsoft (iframe form) and my client asks me to make it responsive.

Is there a possible way to override the css or inject custom style inside the iframe form?

Thanks!

ucMedia
  • 4,105
  • 4
  • 38
  • 46
Mejer Tibor
  • 11
  • 5
  • Sorry, I can't get through of CSS override body style for content in iframe. Wanting to change the styles of the page which is from another sever I can't access ,just in iframe – Mejer Tibor May 19 '17 at 04:48

2 Answers2

0

You can wrap the Iframe inside a div and control the i-frame dimension using different media. 

browser_ = /iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;
iframe {
  border: 0;
}

@media handheld,
only screen and (max-width: 320px) {
  .ReferAFriendWrapper {
    height: 1190px;
  }
}

@media handheld,
only screen and (min-width: 321px) and (max-width: 479px) {
  .ReferAFriendWrapper {
    height: 1190px;
  }
}

@media handheld,
only screen and (min-width: 480px) and (max-width: 639px) {
  .ReferAFriendWrapper {
    height: 960px;
  }
}

@media handheld,
only screen and (min-width: 640px) and (max-width: 750px) {
  .ReferAFriendWrapper {
    height: 760px;
  }
}

@media handheld,
only screen and (min-width: 751px) and (max-width: 768px) {
  .ReferAFriendWrapper {
    height: 600px;
  }
}

@media handheld,
only screen and (min-width :769px) and (max-width: 900px) {
  .ReferAFriendWrapper {
    height: 540px;
  }
}

@media handheld,
only screen and (min-width :901px) and (max-width: 1078px) {
  .ReferAFriendWrapper {
    height: 500px;
  }
}

@media handheld,
only screen and (min-width :1079px) and (max-width :1200px) {
  .ReferAFriendWrapper {}
}

.ReferAFriendWrapper {
  position: relative;
  padding-bottom: 70%;
  /* 16:9 */
  padding-top: 25px;
  margin-top: -0px;
  overflow: hidden;
}

.ReferAFriendWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
<div style="-webkit-overflow-scrolling: touch !important;">
  <iframe src="http://stackoverflow.com/questions/5661868/asp-net-calling-javascript-in-user-control-server-side-method" scrolling="no" border="0" width="800"></iframe>
</div>
Rohit Kumar
  • 776
  • 3
  • 21
0

There's no was to edit any iframe as long as it is cross domain because that would open up a can of worms with respect to security loopholes.

Although if the iframe you're displaying is from the same domain origin, it is possible to modify.

siwalikm
  • 1,792
  • 2
  • 16
  • 20