Solved

100% width Google Map

  • 17 November 2014
  • 30 replies
  • 403 views


Show first post

30 replies

Hi Johnny,

Thank you for your help but this is not what i’m looking for.
Here is website: http://unbouncepages.com/artevent/
I want expand google map on 100% width only.

Userlevel 3

Hey Elvis

Try this:

<style>
 /**
  * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
  * TS:0002-13-015
 */
 #lp-code-38 {
   width:100% !important;
   height:100% !important;
   top:0px !important;
   left:0px !important; 
   position: fixed !important; 
 } 
</style>

Replace #lp-code-38 with your custom HTML boxes ID

This will stretch the map to the entire width and height of the page. Was that more inline with what you were looking for?

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.

Userlevel 3

Hey Elvis - Just to confirm did you want the map to be the entire background of your page? Or just span the exact size of the ‘Custom HTML’ box?

If it’s the latter then you can do so by just setting the ‘width’ and ‘height’ property in the embed code to ‘100%’

Hope that was what you were looking for!

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

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

Reply