iFrame height in Custom-Liquid Theme:Dawn

[SkinByMadeli]

Hi guys.

I want to embed the Setmore booking site in an iFrame on my site. I'm struggling displaying the entire height of the site on the page. Width is okay but the height is horrible. I've tried everything but I think I'm missing something simple.

I'm using Dawn as the theme.

Thanks,

Barend

[GabrielS]

Hi Barend,

Please share your website link for a better relevancy.

The below code CSS is intended to adjust the iframe height.

iframe {height:600px;}

Note that the above code would affect ALL iframes on your website - it would be best to target it more accurately.

Adding the code at the end of your base.css file should reflect the changes on your website.

Cheers!

[made4Uo · Accepted solution]

Hi @SkinByMadeli,

Iframe is a little stubborn. You can try the following code as reference.

Note: Make sure you have the credentials to change the iframe settings.

iframe {
width: 100%;
height: 100vh
}

[SkinByMadeli]

Hi guys. Thanks for the quick reply.

The iframe itself isn't so much the problem, rather the height setting on the Custom-Liquid.

I have this in the text box of the Custom Liquid:

<div class="iframe-container"><iframe src="https://skinbymadeli.setmore.com" height="100%" width="100%" title="The website I want to embed in my Shopify Store"></iframe></div>

The content of the iframe is spread 100% in height and width but the height of the custom-liquid requires scrolling which is not ideal. Hope that makes sense?

This is the code in the custome-liquid:

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: calc({{ section.settings.padding_top }}px * 0.75);
padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75);
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="section-{{ section.id }}-padding">
{{ section.settings.custom_liquid }}
</div>
</div>

{% schema %}
{
"name": "t:sections.custom-liquid.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
}
],
"presets": [
{
"name": "t:sections.custom-liquid.presets.name"
}
]
}
{% endschema %}

[SkinByMadeli]

I tried this now and it actually had the desired result. So simple.

Thanks very much,

[Phenom]

Thanks for this simple solution. Adding the simple height: 100vh in the iframe parameters solved this issue for me in Shopify and in my Woocommerce Divi theme.