Hype map once visible is disappeared (maybe) after wordpress update

1

Hi. I have a website made with the Pro Theme here lekamouraska.com

I made a prototype of a responsive interactive map here lekamouraska.com/carte/

The last time I was worked on the map I was able to see it live on this page. It was before updating to WordPress 4.8.

I use this embed code

<div id="carte_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="http://lekamouraska.com/wp-content/uploads/carte/Carte.hyperesources/carte_hype_generated_script.js?41740"></script>
	</div>

The js file show up so the URL is good.

I have used this tutorial to embed the Hype into WordPress https://www.youtube.com/watch?v=CuwkJTtuGLc

Thanks in advance for your help.

Philippe

2

Try copying and pasting just this into the ‘text’ editor:

<div id="carte_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;"><script type="text/javascript" charset="utf-8" src="//lekamouraska.com/wp-content/uploads/carte/Carte.hyperesources/carte_hype_generated_script.js?41740"></script></div>

Sometimes extra lines or spaces can effect the display of Hype document. If that doesn’t work, can you share the URL of where you have it embedded? You can sometimes see console errors in your browser’s developer console.

3

When using a Hype document with 100% height. You must make sure that the containing element (usually a div) has an absolute height value in pixels. This is so that the Hype document knows what to base the 100% on. It may be that during an update that the aforementioned div lost it’s dimensional information or it didn’t have any to begin with.

@Daniel The URL is shared above but not easy to see. :slight_smile: http://lekamouraska.com/carte/

After looking at that URL it is indeed that the Div holding the Hype Container Div does not have a pixel height. As a quick test I added a “height” value of 400px

and the document showed up.

You could add a style rule in any one of your css docs or even in the head if possible with the Theme you are using that targets that div “x-text” or it’s parent.

1 Like
4

Not working.

5

Hi DBear. Thank you for the quick help but… The Hype is no more responsive.

6

Most Themes in Wordpress have a way to change or add CSS. Also, there may be a plugin to help you out.

A very quick way to add this is to wrap your Hype code in it’s own div with the dimensions that you want. So, wherever you are adding you Hype code wrap it in a div with the style information.

Example

<div style="height: XXXpx">
  <div id="carte_hype_container" style="....">
    <script type="text/javascript" charset="utf-8" style="...."></script>
  </div>
</div>

where XXX is the size you want.

7

Thank you DBear. I have succeeded but the Hype is no more responsive.

8

Are you sure the map element is set to be flexible? as the document and scene clearly are but the map element doesn’t move when the screen changes size

9

I have 2 breakpoints. The first 1200 px and over and a second at 768px. In the preview the map size change.

10

I see. I’m wondering if there are any other media queries that are being set or changing the layouts. It seems strange as the breakpoint is somewhere around 1500px (in your live version) instead of the 1200px you want.

EDIT

Looking deeper into this I can see that the theme (I’m guessing) has a rule for the x-container class with additional classes for width and max (these are classes being applied to your container for the main content)

This is effecting the breakpoints in your document as with the width being 80% the 1200px breakpoint isn’t firing until 1500px (1500 x 80% = 1200). As I’m not familiar with the theme you’re using I couldn’t offer anything more substantial other than look into the Theme to see if there is something that is controlling these values and seeing if you can change or adapt somehow.

1 Like