don't hardcode small width/height but set max-width for dynamic size
#openweathermap-widget-15, #windy, .c3 {
margin: 0 auto;
text-align: center;
- padding-top: 1em;
+ padding: 1em 1em 0 1em;
}
-#openweathermap-widget-15, #windy {
+#openweathermap-widget-15 {
width: 300px;
- height: 244px;
+}
+
+#windyiframe {
+ max-width: 100%;
}
#current, #currentair, #currentwater {
<!-- windy widget -->
<div id="windy">
- <!-- width="650" height="450" -->
- <iframe width="300" height="244" src="https://embed.windy.com/embed2.html?lat=47.297&lon=10.927&zoom=10&level=surface&overlay=rain&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=48.200&detailLon=16.350&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
+ <iframe id="windyiframe" width="650" height="450" src="https://embed.windy.com/embed2.html?lat=47.297&lon=10.927&zoom=10&level=surface&overlay=rain&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=48.200&detailLon=16.350&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
</div>
<hr />