Hello,
iFrame is not something that can be inserted into a page and it will immediately look normal as a paragraph or a picture. For example, some plugin uses iframe, it most often already has some special styles for each corresponding iframe using its scripts or its custom styles (such as YouTube player or Google\open street maps).
Our theme does not use iframes anywhere, and accordingly, there are no special global styles for iframes except max-width: 100%, which was set in the basic styles in order to minimize moments when the iframe will be wider than the display window, thereby creating a horizontal scroll.
If max-width: 100% bothers you, you can remove it using the below custom:
iframe {
max-width: unset;
}
Globally, in the theme, we will not add any height or width styles to the iframe, because this may affect the work of plugins or embedded players and cart.
It follows that each individual type of iframe needs to be styled separately from the others depending on its purpose. If you need to stretch it to the entire screen, it needs to do the following:
1. Give a unique class to the element (for example “custom-iframe”) that contains the iframe so that its new styles do not affect other iframes https://prnt.sc/WJDocfP_dYqD
2. Add the following custom code to stretch this iframe to the entire screen:
.custom-iframe iframe {
width: 100%;
height: 100vh;
}
Kind Regards
.
