I want the iFrame to adjust its height to that of its src document ONLY when the viewport-width is equal or less than 800px.
Can I somehow implement this into a CSS media query?
Or do I need to apply an if-statement to the script?
I only know a little html and css, so as a non-programmer I already did a lot of research and try, nothing worked 'til now. A little help would be much appreciated.
the iframe code:
<iframe name="iframe" class="iframe-content" id="iframe" frameborder="0" src="suchness.html"></iframe>
the script for adjusting the iframe height to its content
<script>
let iframe = document.querySelector("#iframe")
iframe.addEventListener
('load', function()
{iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';}
);
</script>
You can do media-queries in both CSS and JS. In this example it is only really possible in JS, as you are styling the iframe with a dynamic value generated in JS.
const breakpoint = window.matchMedia("(max-width: 800px)");
if (breakpoint.matches) {
// code to be executed
}@media only screen and (max-width: 800px) {
.element {
color: red;
}
}