-
Posts
-
Hello,
I need to add the following page, created externally by a service provider to my own website done with Enfold:
This is the page: VRWS2023 Accommodation map
They provide me with the following instructions:
——————————————————————————————————————–
Steps to embed the code into your event website
STEP 1: Create a new page on the event website titled “HOTELS for <event name>” and place it in the top-level navigation.STEP 2: Paste the snippet of code into the body of your content management system where you want the content piece to be positioned and click save.
Tips when embedding:
The uploader iframe is not compatible with our JavaScript codes.
Embed into a full width column (full screen width), sometimes referred to a “fluid” column, in the page layout. Most page builders (if not all of them) allow for this. If width is constrained, this may affect how the map is displayed.VRWS 2023: https://HotelMap.com/M8E5J
<script async type=”text/javascript” id=”hotelmap_script” src=”https://hotelmap.com/api/html/v2/listing?m=M8E5J&t=Vacation+Rental+World+Summit”>
</script>
————————————————————————————————————-I have done Step 1 and created a page called “Accommodation”
As for Step 2 I added a code block content element and inside it I pasted the script above.
The issue is that our page doesn’t display the map full screen and with the scrollable hotels list on the right as in the original page they created.
How can I have the same look on our page? It’s important because it is way more user friendly than the result on our page.
Thank you for your help.
Hey Antonio,
Thank you for the inquiry.
You can place the embed code within a Color Section and adjust the section’s container to full width. For more information, please refer to this documentation.
// https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width
Best regards,
IsmaelHey @Ismael,
Thank you, I tried but I’m unable to place it full width and have it behave correctly. I followed the instructions you gave me, but the page now is full width, however the map on the left is there but the hotels available on the right do not load correctly, they make the page scroll down, bringing the map on the right away and the hotels get stuck at the bottom.
See the difference between the original page and the one I built.
Can you maybe have a look?
Thank you for your help
Antonio
Hey!
Thank you for the update.
It appears to be displaying correctly now. The section container is full-width, with the map on the left and hotel items on the right. Please make sure that you clear the cache before revisiting the page.
Best regards,
IsmaelHey @Ismael,
Thank you for your prompt reply.It does display full width now but if you scroll the original page and you scroll my page, you’ll see how the map to the left in the original page stays always present while scrolling the part on the right, where on my page when you scroll down the page, the map disappears.
Is there a way that you know that my page map can behave the same as the original page?
Thank you so much for your great support. Much appreciated.
Antonio
Hi,
Thank you for the clarification.
What happens when you limit the height of the section? Try adding this code in the Quick CSS field.
#section-container-width .container { max-height: 100vh; }Best regards,
IsmaelThank you @Ismael,
When I add your CSS the hotel rooms lists on the right of the page becomes stuck, I can only scroll down to a little bit of the page then it doesn’t load dynamically any other Hotel.
So I removed the CSS you gave me above. The hotel map on the left disappears when I scroll the page and doesn’t follow the scrolling list so it doesn’t stay visible, but I can scroll the list and view other rooms on the right.Not sure if there is way to make it behave as in the original page.
Thank you
Antonio
Hi,
We adjusted the code in the Quick CSS field a bit to make the container scrollable.
/* Color section container width */ #section-container-width .container { width: 100% !important; min-width: 100%; max-height: 100vh; padding: 0; margin: 0; overflow: scroll; }Thank you for your patience.
Best regards,
IsmaelThank you so much Ismael!
You guys are all stars!!!
Problem solved, you can close the thread thank you again
Antonio
Hi,
Great, I’m glad that Ismael could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘Problem with page render’ is closed to new replies.