Make the directory map height responsive

The height of the map in the member directory is set in the setting "Map height" on wp-admin > Ultimate Member > Member Directories > Edit Member Directory, see details here. This height value is used for any screen. You can use custom CSS code to make the directory map height responsive, see example below.

Code example

/* make the directory map height responsive */
@media screen and (max-width: 960px) {
	.um-directory .um-member-directory-map {
		max-height: 480px !important;
	}
}
@media screen and (max-width: 800px) {
	.um-directory .um-member-directory-map {
		max-height: 400px !important;
	}
}
@media screen and (max-width: 500px) {
	.um-directory .um-member-directory-map {
		max-height: 250px !important;
	}
}

You can override styles by adding CSS code to the field "Additional CSS" on wp-admin > Appearance > Customize > Additional CSS.

Screenshots