-
Hi,
We use the Interactive globe plugin, but wanted to have it on the background of a page with the header and footer floating above. We have some issues with the result though, and have described that here:https://united-earth.net/generatepress-styling/
Perhaps you can see an easy way out?
best regards
Karl -
Hi there,
you would need to give the page some height.
Either with CSS:.home #page { min-height: calc(100vh - 60px); }Or edit the page and place a GB Container block inside it and set its Sizing > Min Height.
And you can use the same calc property their. ie. type:
calc(100vh - 60px);property into the field.That calc method will be responisve ie 100% of the viewport height minus 60px.
Adjust the 60px to suit
-
Hi,
Thank you for taking the time. Perhaps this is a little outside the scope of GP-specific support?If you have time for one more: The block method worked ok on a large screen with -300px, but the a gap between the globe frame and the footer emerge and increases when the screen gets smaller, pushing the globe up. Perhaps I should skip or change something in the custom CSS we wrote (some came from the Interactive Globe folks, some from me, so I may have messed it up).
-
Is there going to be any page content that will sit in front of the globe ?
-
It would be good to have the possibility, to display for example some large text in front of the globe and give the user an option to turn that off to enable interaction with the globe.
-
Ok, the custom CSS at the moment is designed to keep the globe responsive so it resizes down with the screen. Which would make it tricky to keep the footer overlap on mobile.
Do you want to break from that responsiveness ie. so the globe would be wider then a narrow screen. ?
-
Whatever it takes to make the globe fill the screen on mobile portrait mode, and then have a slice of the moon surface image stick to the bottom of any screen would be ideal.
But before going further on that, what about a simplified approach:
1) The globe is shown on a special page which doesn’t have the footer at all but that image instead
2) Then all custom style for this page is made exclusively for that page with .page-id-XX selector
However I still struggle with how to apply this image.I’ve began implementing this at https://united-earth.net/globe-test/ (ID=214)
1) uploaded the image moon-surface-horizon.png and just added that to the page via an image block, which doesn’t work at all (should perhaps use a Custom HTML block?)
2) disabled the old custom CSS and uploaded new in Simple CSS (so now the homepage looks weird, but thats ok)
I attempted to implement the image via that CSS, but no success yetPerhaps this is a better and simpler strategy?
-
You could place the image as a pseudo element on the
globe_wrapperelement:.globe_wrapper:after { content: ''; position: absolute; inset: 0; background-image: url(https://united-earth.net/wp-content/uploads/2024/02/moon-surface-horizon-1024x35.png); background-repeat: no-repeat; background-size: contain; background-position: bottom center; }That way the image is fixed to the bottom of that wrapper.
-
That worked, except I now cannot interact with the globe. Perhaps I applied the CSS wrongly? What I did was remove the previous attempt to solve this and put your code in there:
/* Positioning the moon surface image at the bottom */
.page-id-214 .moon-surface {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
z-index: 10;
background: url(‘https://united-earth.net/wp-content/uploads/2024/02/moon-surface-horizon.png’) no-repeat bottom center;
background-size cover;
}And still, we have the responsiveness issue with mobile: the globe doesn’t fill the whole space and leaves a gap down to the moon surface image. This happens when the browser window is made narrow, not just on mobile portrait.
Isn’t it possible to solve this when the globe is in the background?
-
I use ChatGPT in parallel here, and found the solution for the interaction issue by simply adding this line to your code:
pointer-events: none; /* This allows the mouse events to “pass through” */When it comes to the other issue, it suggests the problem must be solved with placing an event listener to do the window resize event to adjust the globe’s canvas size dynamically based on the viewport dimensions. I will discuss this with the plugin developers.
-
Glad to hear you got that working.
Yeah the Canvas resize is a tricky one, and the JS allow method would allow you more control based on viewport size changes. -
Thanks for fantastic support, and even through the weekend 🙂
-
you’re welcome!
- You must be logged in to reply to this topic.