2 replies [Last post]
polaatx
polaatx's picture
Offline
newbie
United States
Last seen: 2 years 44 weeks ago
United States
Timezone: GMT+2
Joined: 2017-05-10
Posts: 3
Points: 5

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. Crazy

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 29 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

polaatx
polaatx's picture
Offline
newbie
United States
Last seen: 2 years 44 weeks ago
United States
Timezone: GMT+2
Joined: 2017-05-10
Posts: 3
Points: 5

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.