Snazzy Maps Map Builder removing content

Design help Custom code
1

Hi All,

I have a snazzy maps theme integrated to a webflow site via the Map Builder and an embed widget. Snazzy Maps ports in via an iframe.

When the site is published the content that follows the iframe is hidden. Webflow support believe that it may have to do with the absolute positioning of the iframe. The problem is I can’t edit the contents of the iframe!

Support response:

I used the Google inspector to look at your live site, and it looks like the issue is from the <iframe> within the html embed.

As you can see here (Image 2017-06-27 at 12.35.2...), the elements within the iframe are set to position: absolute. I think this is causing your footer section to hide underneath the map.

I have not personally used snazzymaps, but you may be able to edit that setting to position: relative to fix the issue.

I am going to reach out to snazzy maps support but can anyone see a way around this problem?

Here is the live site: http://zenza-interiors-single-page.webflow.io/
Here is the webflow preview: https://preview.webflow.com/preview/zenza-interiors-single-page?preview=a0c7bfc12eee7e097b772f4189d66cd5

Cheers

2

Your iframe code is invalid, rendering all content below invalid as well. Copy the exact code provided by the third-party vendor without modifications.

3

The live site looks very different from the webflow version. The webflow version (appears to) work just fine for me in Chrome.

1440×804 96.9 KB

4

That’s because Embed Code doesn’t work correctly in the Designer. (or rather, there is error handling in the Designer and bad custom code won’t break it)

When the browser displays the live site, any invalid custom code will become apparent.

5

The 3rd party code is: <iframe src="https://snazzymaps.com/embed/139" width="100%" height="480px" style="border:none;"/>

Not a lot of room for error there. The problem is the iframe is not exposed or editable on Snazzy Maps.

6

I’m not sure where you are getting that code from, but I’ll provide one more hint: xml - Why can't I say <iframe /> and be done with it? - Stack Overflow

7

Cheers, thats the problem though! Other way around - webflow is fine, published version (see deployment link) truncates all content below the iframe but looks like its a problem with the Snazzy iframe

8

Try this:

<iframe src="https://snazzymaps.com/embed/139" width="100%" height="480px" style="border:none;"></iframe>

9

Seems like their map builder tool is broken, you should also contact their staff and inform them about this: xml - Why can't I say <iframe /> and be done with it? - Stack Overflow