Special Map for smartphone in Joomla

Hi Dima!

I need a special map height for the smartphone user and i tried following way.

Make a second map.

for example:

map1 (height: 600px)
map1_mobil (height: 500px)

Make two modul in joomla:
One with map1 and subfix hidden_phone
One with map1_mobil and subfix visible_phone

but on the smartphone will not be showed!
Is there also a other way to make a own map for smartphones ?

You can try to use the same map, but define
in map details CSS class name.
And after that apply your CSS depends on device resolution

Dima can you give me a example for the map class name and a definition ?

Here map with default class name



Go to map details, Advanced options tab, and enter your class name



And now you can see your class for map div

Okay Dima, now i have give the map a class name name = mobil
and than ? how i can confugure it for the resulotion ?

I'm not well on CSS, just check words in CSS like
@media only screen and (max-width: 960px), (max-device-width: 960px) {
/*here CSS styles*/
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
/*here CSS styles*/
}

@media only screen and (min-width: 481px) and (max-width: 960px), (min-device-width: 481px) and (max-device-width: 960px) {
/*here CSS styles*/
}

@media only screen and (min-width: 719px) and (max-width: 721px), (min-device-width: 719px) and (max-device-width: 721px) and (orientation:portrait) {
/*here CSS styles*/
}