Community @ The Turning Gate
Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
- New user registrations are disabled.
- Users cannot create new topics.
- Users cannot reply to existing topics.
You are not logged in.
- Topics: Active | Unanswered
#1 2018-11-24 01:58:28
- Rainer Goergen
- Member
- From: Trier, Germany
- Registered: 2016-05-01
- Posts: 401
- Website
Iframe center with html code? - Iframe is not responsive
Hi,
now I have a new page with google maps iframe.
I have centered it with html align: center. But I think this is no html 5 compatible.
I don't know how to format this with css. I have read a lot in internet and I could not find a solution.
https://www.birkenhof-sanitec.de/routenplaner.php
And now I have tried this site on my iPhone and I have seen, that the iframe is not responsive.
Edit: Found the code and it works, wow.
Rainer
Last edited by Rainer Goergen (2018-11-24 02:15:18)
Offline
#2 2018-11-24 02:25:09
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: Iframe center with html code? - Iframe is not responsive
you'll need to do something else with that iframe to make it responsive: Try the Pym Embeded iFrame feature of Theater:
http://backlight.theturninggate.net/doc … tation_pym
to center text, use inline styling instead of align:center in html
<p style = "text-align:center;">Your text</p>
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
#3 2018-11-24 08:03:09
- Rainer Goergen
- Member
- From: Trier, Germany
- Registered: 2016-05-01
- Posts: 401
- Website
Re: Iframe center with html code? - Iframe is not responsive
But with my code it is responsive, and I don't want to center the text but the google maps map image.
With this code the maps image is centered, but I don't know it is compatible with html 5:
<div>
<p align="center"><iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d20876.300941137528!2d6.804165503490462!3d49.72376588036916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e0!4m0!4m5!1s0x4795823fa72813c5%3A0xc65dd3d1a8746d3e!2sBirkenhof+SANITec%2C+Birkenhof%2C+54317+Farschweiler!3m2!1d49.723762!2d6.821675!5e1!3m2!1sde!2sde!4v1542980308560"" id="idIframe" width="1040" height="450" onload="iframeLoaded()" style="border: none;" allowfullscreen> </iframe></p>
</div>
Rainer
Offline
#4 2018-11-24 08:45:39
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: Iframe center with html code? - Iframe is not responsive
seems to work. I don't know that it needs to be inside of a paragraph tag.
But if it's working for you, don't fix it 
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
#5 2019-12-17 02:22:37
Re: Iframe center with html code? - Iframe is not responsive
I've been using &z= for zoom and &ll= for lat, long. Seems simple. To get the lat, long select an existing map pin or place a pin where you want the center to be. Then edit the pin and copy the lat, long. The put it in the iframe snippet for embed that you get from Google. Example:
<iframe src="https://www.google.com/maps/d/embed?mid=1rPtVRR-80ow9vWIjmYXoNx-VISUsA5Dl&z=12&ll=21.36659, -157.95168" width="350" height="480"></iframe>
Mike Richards
michaelrichardsphotography.com
Offline