Docs

[mike-moonray]

I’ve placed a Google Map in a marginless column without a column container and want it to fill both the width and height.

Based on some other posts here I’ve tried changing the padding bottom to both 0 and 100%. In both cases I can’t get the map to fill the height of the column unless the browser’s width is greater than 2380px.

Any suggestions on how to solve this?

[Paul R]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[mike-moonray]

This reply has been marked as private.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (min-width:  768px) {
	#x-section-6 .x-container .x-1-2 .x-google-map .x-google-map-inner {
	height: 100vh;
	}
}

Hope it helps, Cheers!

[mike-moonray]

Thanks, unfortunately that made the map the full height of the screen. I needed it to match the height of it’s sibling column.

I ended up with the following css, and on the column containing the map I removed the padding on the column and set it’s style to position: relative;

@media (min-width:  768px) {
	.marginless-columns .x-1-2 .x-map  {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		margin-bottom: 0;		
	}
	.marginless-columns .x-1-2 .x-map .x-map-inner {
		height: 100% !important;
	}
}

This StackOverflow answer by King King by is what helped me out: http://stackoverflow.com/a/22712844/260152

[Friech]

Glad you sorted things out and thank you for sharing.

Cheers!

[Author]

Posts