-1

I have a problem, i can't resize my iframe to be fully responsive (I mean, the content!)

<iframe src="https://www.meteoblue.com/fr/meteo/widget/three/saint-jean-de-braye_france_2979341?geoloc=fixed&nocurrent=0&noforecast=0&days=4&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=image"  frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 460px;height: 594px">
Nima Derakhshanjan
  • 1,380
  • 9
  • 24
  • 37
Marc Lantol
  • 1
  • 1
    Possible duplicate of [Making an iframe responsive](https://stackoverflow.com/questions/17838607/making-an-iframe-responsive) – Towkir May 09 '19 at 08:33
  • I tried some answers of this topic, with no luck, unfortunatly.. – Marc Lantol May 09 '19 at 08:38
  • 1
    The iframe itself will be responsive, you can find your answer there or some other SO questions of similar issues, but the content / url from which you are fetching your page has to be responsive too. otherwise you'll only see your iframe shrinking and expanding, not the content inside. – Towkir May 09 '19 at 08:40
  • Ok I thought there was a way (in JS maybe) too override some limitations... – Marc Lantol May 09 '19 at 09:54
  • No, there isn't. JS can modify contents within a page, not from another page / source. if you own the page which you are fetching with iframe, you can make that page responsive. There is no other way. – Towkir May 09 '19 at 09:56
  • This might be something: https://stackoverflow.com/questions/36819383/how-to-make-the-contents-inside-an-iframe-responsive – Towkir May 09 '19 at 10:00
  • Thx for the link! – Marc Lantol May 10 '19 at 09:27

1 Answers1

0

Do like this

.iframe-container{
max-width:700px;
width:100%;
margin:0 auto
}
<div class="iframe-container">
<iframe src="https://www.meteoblue.com/fr/meteo/widget/three/saint-jean-de-braye_france_2979341?geoloc=fixed&nocurrent=0&noforecast=0&days=4&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=image"  frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 100%;height: 594px"></iframe>
</div>
Vikas Patel
  • 207
  • 1
  • 10
  • Yes actually there is a min-width set inside iframe .wrapper.count-4 { min-width: 440px; max-width: 520px; } this is causing the problem. Can u remove the min-width property or set it to 320px instead of 440px – Vikas Patel May 09 '19 at 08:39
  • Yes! I saw that, but it's not my iframe so i cant't iteract with .wrapper.count-4... – Marc Lantol May 09 '19 at 09:53