Skip to main content

How could I make 100% width Google Map inside custom HTML?

Main problem is that p-positioned-content class is limiting page width.


Thanks in advance!

Elvis

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


That’s fine. I will just change the base colour from white to match the colour of next section and it should look better. :dealwithitparrot:


Thanks for your help 🙂


I used the code provided here :



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

Works fine for the full width but it puts the map sticked in header.


Thanks for your help!


I’m trying to get the 100% width to work on my page. When using the code snippets above, it does affect the width, but it also removed all scrolling (up and down) on the page effectively cutting off content. Is there a way to avoid that?

thanks!


Did you solve the problem? I’m having the same trouble here and don’t know how to fix it.


Reply