Wed, 2017-05-10 10:39
Hello,
On this page: https://goo.gl/JYeu2z there's an iframe embed of google map in the very bottom of the page.
Wordpress automatically puts the iframe inside P tags. I can't get around that.
<p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52703.72503342482!2d58.663129170303066!3d34.35091546442272!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f121fdc66f0de93%3A0x97ae5d04f8abd8f!2sGonabad%2C+Razavi+Khorasan+Province%2C+Iran!5e0!3m2!1sen!2sus!4v1493787455772" width="2000" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
Because the iframe is inside a P tag, it adopts the P tag's max-width: 700px; property.
But I want my iframe's width go to the edge of the browser! But putting putting width="2000 inside the iframe tag does not do that job.
Adding this to the CSS doesn't help either:
iframe { max-width: 2000px; width: 2000px; }
So what are my options? Is there a way to break free from the constraints places on iframe tag by the p tag? I would think this is a common issue. But so far haven't found any decent answers. 
Wed, 2017-05-10 20:29
#1
iframe container
You cannot do it by styling the iframe, you must control the container.
Give the P element that holds the frame an ID, e.g. <p id="map">. Now style that element.
The controlling css is in the html document (stupid, I know, but it is WP after all)
<style type="text/css" id="csseditorglobal"> .admin-bar #site-header{ top: 32px; } body {font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;} body #primary-content p, #primary-content li { font-size: 20px; margin: 0 10px 10px; max-width: 700px; /* the rule you must override */ margin-left:auto; margin-right:auto; }
To override, add this to the style element:
body #primary-content p#map { max-width: none;}
I leave it to you to integrate the changes into WP's methods.
gary
Sat, 2017-06-03 11:39
#2
Thank you so much Gary. Your
Thank you so much Gary.
Your solution works. I suppose I need to write out by hand
tag each time I add a map.
If by chance there is a trick (or plugin) to automate this process, please let me know.
Again, thank you for your help.