How to display different map sizes

[BMM01]

I am using Joomla 4.2.2 and PhocaMaps 4.0.0. Template is Rocket Theme Versla 1.5.0. Gantry version 5.5.14

I would like to have a 350 px x 600 px map on phone and a 900 px x 600 px map on tablet / desktop.

I figured that I could use the Gantry module hide / display suffix class to hide or display the module depending on screen resolution.

I created two maps - one with 350px x 600px and one with 900px x 600px.

I created two articles - one with the map reference 1 and the other with map reference 2.

I then created two different modules - one for each article. The first has the module suffix "visible-phone" and the second with "hidden-phone".

The module displayed changes as desired, but the map is the same size (350px x 600px) regardless of which module is displayed.

Any ideas on what the problem could be? Or another solution (mine is quite complicated).

Thanks

[Jan]

Hi, I think, the best way is only use the CSS, just create only one map and stylize the widht and height for it in CSS (per media query in CSS you can set different size for different views)

Jan

[BMM01]

Thanks Jan

Don't know why I didn't do this but I set the width to 100% and it works fine.

Thanks for a great extension.
Brett

[Jan]

Ok, great to hear it.

Jan