-
Posts
-
Dear Support Team
for a website I had to integrate OpenStreetMap via i-frame for GDPR reasons (otherwise the cookie banner would not work) (and no longer via the Leaflet plugin – which is not recognized by the cookie banner).
For this purpose, I have now integrated the i-frame on the test page https://emmerams-muehle.de/kontakt-2/ (the map is at the bottom). And although I have entered width=100% in the script of the i-frame, the map is not displayed over the full screen.
(For comparison, the previous integration via Leaflet: https://emmerams-muehle.de/kontakt/ >Here the map is displayed correctly over the entire width of the screen).
What can I do so that the i-frame element also appears across the entire width?Best regards, Diana
Translated with DeepL.com (free version)
Hey!
Thank you for the inquiry.
You may need to place the map inside a Color Section element, then set the width of the element container to 100%. Please check the documentation below for more info:
// https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width
Regards,
IsmaelDear Ismael
Thank you very much for the lightning-fast reply :)
I have integrated the script as indicated and YES the map is now displayed over the entire width of the screen.
But there is still a white border at the top and bottom – although margin and padding are set to 0.
Could you help me further so that I can remove this border?Best regards Diana
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
#anfahrt { border-color: transparent; }Best regards,
RikardDear Rikard,
unfortunately the script does not work. First I tried it with the specified section #approach. But my problem with the white borders refers to the section with the OpenStreetMap > so I changed the name #section-container-width in the second attempt, but unfortunately the white borders still exist.
What else can I do to remove the white borders at the top and bottom of the map?
Best regards, Diana
Hi,
Thank you for the update.
We’re not quite sure where the extra space is coming from, but you can try this css code to pull the bottom section upward.
#section-container-width { margin-bottom: -8px; }Best regards,
IsmaelHello Ismael,
Thanks for the feedback. I have integrated the code and adjusted the number of px a little. The code is now:
#section-container-width {
margin-bottom: -15px !important;
margin-top: -6px !important;
}
> It works reasonably well in Firefox, but when I test the page in Google Chrome or Safari, it doesn’t work again – a margin is displayed there again.
I also don’t understand where this is coming from. Maybe you can think of something else?
Otherwise I’ll just leave it as it is …
VG DianaHi,
Try adding this css:#section-container-width .avia_codeblock { height: 500px; }Best regards,
MikeHello Mike,
I have integrated the specified script into the CSS. The map with openstreetmap is now on the main page of Kontakt: https://emmerams-muehle.de/kontakt (at the bottom)
Unfortunately, the white borders are still displayed.
Best regards, DianaDear Mike,
This is really completely surprising, because – yes, I had deleted the browser cache before and now again. I then tested the site again in Mozilla Firefox and Google Chrome and the white border is still visible in both:
see screenshot Mozilla Firefox: https://emmerams-muehle.de/support/openstreetmap.jpgBest regards Diana
- You must be logged in to reply to this topic.