I entered my content into the embed block with some CSS to style iframe. However, with different products that have varied content, the height of the content will vary as well as depending where the content is viewed (desktop, tablet, mobile, etc).
Here's the site:
https://www.frameidstudio.com/packages/design-consultation-iframe-code
Here's what I entered in my embed block in the code:
<div id="package-products-content">
<iframe src="https://www.frameidstudio.com/design-consultation-content" scrolling="no" allowFullScreen></iframe>
</div>
Here's what I wrote for CSS to change the style of the iFrame:
//IFRAME STYLE
#package-products-content {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
}
#package-products-content iframe {
position: relative !important;
width: 100% !important;
height: 100% !important;
border: none !important;
}
//IFRAME HEIGHT DESKTOP
#package-products-content {
@media all and (min-width:1250px) and (max-width: 2100px){
height: 345vh !important;
}
}
//IFRAME HEIGHT TABLET
#package-products-content{
@media all and (min-width:701px) and (max-width: 1249px){
height: 340vh !important;
}
}
//IFRAME HEIGHT MOBILE
#package-products-content{
@media all and (min-width:300px) and (max-width: 700px){
height: 550vh !important;
}
}
@tuanphan - I would love to achieve a dynamic height for the iFrames depending on content, and device screen size. Any input would be greatly appreciated.