WPGoogleMaps and Catalyst responsive design WordPress

Gabriel Reguly answers:

Hi Steve,

With Firebug I can make it 100%, but what are you looking for?

I mean, should the map be 100% or should it's zoom level be set to be one image only?

Regards,
Gabriel

---

---

---

---

jazbek answers:

Hi Steve,

I was able to do this in firebug by adding

.wpgmza_map: {
width: 100% !important
}

to the css. The !important is... important... because the plugin is setting a width on the element style attribute, so you need to override that.

HTH.

Christianto answers:

Hi Steve,

Your site maps width & height is define with jQuery/Javascript.
The place is on wpGoogleMaps.php around line 332 and up.. ( the position may little different in your plugin )
you will see this code
jQuery("#wpgmza_map_1").css({
height:'<?php echo $wpgmza_height; ?><?php echo $wpgmza_height_type; ?>',
width:'<?php echo $wpgmza_width; ?><?php echo $wpgmza_width_type; ?>'
});

And the selector will be different since you using "#wpgmza_map_1"

you can commented that line and define the width manually using css to make responsive..
on your style.css file you can add for example:

@media only screen and (max-width: 1024px) {
#wpgmza_map_1 {
width: 100%;
height: 500px;
}
}

@media only screen and (max-width: 800px) {
#wpgmza_map_1 {
width: 100%;
height: 400px;
}
}

@media only screen and (max-width: 320px) {
#wpgmza_map_1 {
width: 100%;
height: 320px;
}
}

So you can define not only the width but also the height of your maps.
Hope this help

Arnav Joy answers:

try to remove width from div with in plugin file having class "wpgmza_map" and then use width:100% as suggested by forum or directly change width:100% at the plugin file then it will work.