100% width Google Map

It works smoothly.

If someone else gonna try it just make sure ‘stretch background to page edges’ box is checked .

Hey Elvis - Give this a try:

Drop the following into your javascript box:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery('#lp-pom-block-39 .lp-pom-block-content')
 .css('width', '100%')
 .append('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.5437478600206!2d-123.115227!3d49.285042000000026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5486718276025337%3A0x9e0b0fbb24f756af!2sUnbounce!5e0!3m2!1sen!2sca!4v1416345455256" width="100%" height="100%" frameborder="0" style="border:0"></iframe>');
</script>

Replace #lp-pom-block-39 with your section ID and the < iframe > code with your own map embed code.

I think that should do it. It’s quite a bit of a workaround so I can’t guarantee it will be perfect but hopefully it works for what you were looking for.

If you don’t want the height to expand the entire page section height, just adjust the ‘height’ property to a number of pixels (ex: ‘300px’)

Hey Jai!

So awesome that you got it working.

As for the height issue that can be a bit tricky. This is the downside to having a video ‘stretched to page edges’. This requires the section itself to be dynamic in height based on the video size, which would likely require javascript to detect the screen size first before adjusting the height of the section. Doing so could potentially offset the look of the other elements of your page, as all Unbounce elements are absolutely positioned, rather than relative to elements around it.

To be honest I don’t have much of a suggestion here. Stretching it to page edges may not play well without adding a lot of complexity to your script.

Sorry I couldn’t be of much more help. If I do think of anything else I’ll be sure to post an update here

I found something, but it’s not working in safari and older browsers.

#lp-code-249 {
left: calc(-50vw + 50%) !important;
width: 100vw !important
}

Hi Johnny, I need entire background width.

I have embed code on 100% width and I have also override some of the css with 100% width and it is not working because “#lp-pom-root .lp-positioned-content” div is limiting the page. If I make “#lp-pom-root .lp-positioned-content” div 100% width it break the whole site.

I assume we need some jquery trick or something.

Thank you in advance.

It is working!

This is greate pice of code for Unbounce Templates.

Thank you very much for your time Johnny!

Best regards,
Elvis

Hey Johnny, 

I’m trying to do the same thing, but am having issues getting around the template’s set page properties width. 

The div is viewing the HTML snippet as “content” which is defaulted to stay within the boundaries of the page properties set width. 

Is there a way for the HTML snippet to override the set width so that is has a percentage based width? 

Apologies if that is unclear. 

Thanks!
-Matt

Hi everyone ! 

I need please install map but without scrolling zoom on:

http://cuanticcuanticoweb.it/studio-dentistico-panzanera

I found here in this page a part of code: 

http://stackoverflow.com/questions/29146888/disable-scrolling-zoom-in-google-maps-iframe

but I can’t do it both   :( 

Please help me !

Hi Grazie!
Since this isn’t our script I’m not sure exactly how we can modify it to do exactly that, but if you get in contact with the template creator he should be able to give you some pointers. He’s a really friendly guy!
support@surjithctly.in

Whoa, Aurelio! This looks really great! :) 

I have a quick question about the neat loading animation. Is this just for effect? How have you found this has affected your conversion rates (if at all)?

Hey Johnny, I tried to use your last script from ‘Nov’14’ to expand a video embedded in ‘custom HTML’ example

<script> <br />
$( "#lp-pom-block-XX .lp-pom-block-content" ).css('width','100%').append('<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');
<br /> </script>    indent preformatted text by 4 spaces/script>

It worked and get expanded to 100% width but not in the provided #lp-pom-block-XX. It gets shifted at the bottom of the page and #lp-pom-block-XX is just empty.

I dont have any knowledge about coding.

Can you please help me to sort it out?

Thanks
Jai

Yes, you get it right.

I want to create something like the mobile page in this screenshot.

thanks