Why isn't my ExpoFP embed code showing on my website?

[BrandonCard]

Hi! I was trying to add a code snippet to embed an interactive Floor Plan on the website using ExpoFP. I was given both a script code:

<div class="expofp-floorplan" data-data-url="https://AquaMania2024.expofp.com/data/" data-event="AquaMania2024"></div><script src="https://efp-data.s3.amazonaws.com/packages/master/expofp.js" crossorigin="anonymous"></script>

and an iframe code:

<div style="width:100%; height: 100%; position: relative;"><iframe style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;width:100%; height:100%" src="https://AquaMania2024.expofp.com"></iframe></div>

Neither are showing up on the website when trying to add to the Custom Liquid Section.  This is the page I am trying to add it to: https://aquamania2024.com/pages/floor-plan

What am I doing wrong? please help!

[PaulNewton · Accepted solution]

Set the height to an actual value either on the containing div or the iframe.

100% height in CSS doesn't work the way you think it does in combination with iframes, you can research that on the web.

I.e. <div style="width:100%; height: 400px; position: relative;">

Keep in mind with your current layout this is kinda obnoxious as it's too easy for users to constantly scroll up and down due the insists-on-itself amounts of whitespace in the header and footer. So you probably want to give that page a custom layout or styles.

[BrandonCard]

This worked! I'm new to this and still learning so this was very helpful. Thanks.