Can a Google Map fill the height of a column?

[core365]

Hi, I’m working on a site with a row with 2 columns. The first column has text and the second column has a Google map. I’ve tried to do it so the height of the map fills the height of the column by adjust the ratio, which isn’t ideal and doesn’t work on all screen sizes, as sometimes it doesn’t quite fill the column and has a gap at the bottom, and other times it’s too tall and the first column has a big gap under the text! Would you mind taking a look and letting me know if I’m doing something wrong please!

The URL is: https://www.unlockeylocksmithandwindowrepairs.co.uk/locksmith-rugby/

Here’s a screen grab for your reference.

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in!

Regretfully the map element cannot fill up the height of the column because it depends on the aspect ratio of the frame or by adding a fixed height.

Hope this helps.

[core365]

Hi, ok, if I just use a text box to put the google map code in, is there a way using CSS to get the map to fill the height of the column?

Thanks!

[friech]

Hi @core365,

@core365

is there a way using CSS to get the map to fill the height of the column?

Please add this to your Page > CSS area.

/*full height on mobile*/
@media (max-width: 1324px) {
	.x-frame-map-embed,
	.x-frame-inner {
		height: 100% !important;
	}
}

/*maximum height on large screens*/
@media (min-width: 1324px) {
	.x-frame-map-embed,
	.x-frame-inner {
		max-height: 475px !important;
	}
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

[core365]

Hi @friech,

That’s fab, thanks! That’s spot on for how I wanted it!

Many thanks for all your time and help!

[friech]

We are delighted to assist you with this.

Cheers!