Responsive height - Githubissues

Joniff / Terratype

Multiple map picker for Umbraco CMS

19 stars 14 forks source link

Responsive height #5

Open DavidNyqvist opened 7 years ago

DavidNyqvist commented 7 years ago

Hi, i'm having some trouble setting a responsive height when rendering Terratype. Since the options do inline-style height on the element, it messes up when we switch between desktop and mobile. Say we want 500px while on desktop and 300px while on mobile, it's problematic to do via css. Do you have any tips or tricks for that?

Regards David

Joniff commented 7 years ago

Hi David

I would suggest rendering two separate maps

Map number 1 would be hardcoded to a height of 500px and via a media query in css only show when in desktop view
Map number 2 would be hardcoded to a height of 300px and via a media query in css only show when in mobile view

Cheers Jonathan

mikaelkarlsson-se commented 7 years ago

Hi, I'm in the same boat and would really appreciate if the div that contains the map could have a css class (set by Terratype or custom). The suggestion with two maps is to stubborn in my case.

I've managed to solve this with some rather basic CSS though, but I would rather have a css class (or an ID that doesn't contain a lot of random (?) characters). div[id^="TerratypeGoogleMapsV3"] { height: 500px !important; }

Thanks for an otherwise really good plugin! :)