Title: iframe full width
Last modified: March 13, 2017

---

# iframe full width

 *  [jprimav](https://wordpress.org/support/users/jprimav/)
 * (@jprimav)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/iframe-full-width/)
 * Hi,
 * I have a post with a map embedded through iframe here [http://slow-data.com/wifibar/](http://slow-data.com/wifibar/)
   
   I would like the map to take all screen width, while the remaining text can stay
   the same. I made some try with width:100% but I am not sure which is the css 
   class to reference the map. Any idea?
 * thanks a lot
    jacopo

Viewing 1 replies (of 1 total)

 *  [Chad Chadbourne](https://wordpress.org/support/users/shireling/)
 * (@shireling)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/iframe-full-width/#post-8914131)
 * Hi Jacopo – this is an interesting one to implement. It’s possible to force the
   map (which is an iframe) to take on the full width of the screen, and then position
   it so it fills the screen – but we have to make the CSS do a bit of math to figure
   out where the edge of the screen is related to where the map normally appears.
 * Try the following CSS. It targets _all_ iframes on your site, which may not be
   what you want – adding classes to the iframes you want to target and adjusting
   the CSS to be more specific might not be a bad idea 🙂
 *     ```
       iframe {
           width: 100vw;
           max-width: 100vw;
           position: relative;
           right: 5vw;
       }
       @media screen and ( min-width: 1266px) {
           iframe {
               right: calc( (100vw - 1140px)/2 )
           }
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘iframe full width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/rebalance/1.1.8/screenshot.png)
 * Rebalance
 * [Support Threads](https://wordpress.org/support/theme/rebalance/)
 * [Active Topics](https://wordpress.org/support/theme/rebalance/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/rebalance/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/rebalance/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Chad Chadbourne](https://wordpress.org/support/users/shireling/)
 * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/iframe-full-width/#post-8914131)
 * Status: not resolved