0

I'm trying to add Amazon banners to a website (powered by WordPress) and make it responsive. I tried something like

.adbanner {
    position: relative;
    width: 100%;
    padding: 64% 0 0 0;
    height: 0;
    overflow: hidden;
}
.adbanner iframe,
.adbanner object,
.adbanner embed,
.adbanner table,
.adbanner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

and

<div class="adbanner">
    <!-- copied and pasted Amazon code -->
    <iframe src="http://rcm-fe.amazon-adsystem.com/blah/blah/blah...">
</div>

However, on mobile devices (or in a shrunk browser window), the banner still has its original size and does not fit in the window.

I tried to control the size by JavaScript, but it didn't work because of crossdomain. Is there any way to control the size of iframe content?

mmrn
  • 249
  • 2
  • 8
  • 18
  • @mmm : can you just this link may help you http://stackoverflow.com/questions/17838607/making-an-iframe-responsive – Codebrekers Jul 22 '16 at 04:39
  • Nope you cannot change iframes content when its not the same domain... – Jonas Wilms Jul 22 '16 at 04:40
  • I tried the solutions above, but it works only for the size of iframe, not the image size within iframe. Seems that Jonas is correct and I cannot change the img size in iframe if it is crossdomain. It's sad. – mmrn Jul 22 '16 at 07:57

1 Answers1

0

Please provide a MaxWidth of the image like this

img {max-width:100%}

please refer also this link

https://wpbeaches.com/make-images-scale-responsive-web-design/

Hardik Kothari
  • 1,686
  • 1
  • 15
  • 29