Having trouble making a map embedded via an iframe on a WordPress page display responsively at full height independent of the device? Check out: .
To clarify, by full height, I mean that the bottom of the map should not extend beyond the screen, eliminating the need for scrolling to view the entire app. The upper limit would naturally be the navigation bar.
In the WP page editor, I've included the following HTML/CSS code (gathered from various sources):
<style>
.embed-container {
position: relative;
height: 0; min-height:550px;
padding-bottom: calc(60rem + 10px);
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
small{
position: absolute;
z-index: 40;
bottom: 0;
margin-bottom: -15px;
}
</style>
<div class="embed-container">
<small><a>href="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea" style="color:#0000FF;text-align:left" target="_blank">View larger map</a></small>
<br>
<iframe width="940" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Svalbox" src="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea"></iframe>
</div>
The code successfully adjusts to the viewport's width, but attempts to set different height: 100% values have been unsuccessful, resulting in either no change or a shrunken map app... Despite my HTML/CSS knowledge, this has been a frustrating challenge for hours...
Any assistance is greatly appreciated.
Thank you, Nils