Infowindow's width

[Sonia]

I upgrade to MapPress Pro 2.39.8

The width of the InfoWindow is too large. My infowindow’s width is over 600px. I tried changing in the class .mapp-ib, the max-width: 300px;, from mappress.css, but does not change the width of the infoWindows.

Another question is how I can make a responsive infowindow for smartphones?

[Chris]

Hi,

Please provide a URL illustrating the problem.

The infowindow inherits most of its styling from your blog so it’s probably something in your theme.  You can see if that’s the issue by switching to a standard theme for a minute, like 2012.

You can change some infowindow styling in ‘mappress.css’ (just put the changes in your theme’s ‘styles.css’).  The classes are ‘mapp-iw.   Much of the style comes from Google itself, like the shadow, corners, tip, etc.

If you use the ‘infobox’ bubble type instead of ‘infowindow’ (you can change it on the MapPress settings) then you have more control over the CSS.  It is styled using the ‘mapp-ib’ classes.

[Sonia]

http://www.turismovalledelecrin.com/alojamiento/

I think the problem is the width of the map. If the width of the map is 100% the infowindow is too large. And when you see the map in a smartphone, the infowindow overflows the screen.

Can you help me?

[Chris]

Hi,

Google sets the infowindow size based on the map width and the content of the infowindow.

To prevent it from getting too big, I think you can add this to your “styles.css” of your theme:

.mapp-body {
max-width: 300px;
}

When using images, try to use image thumbnails, not the whole image – they’ll load faster.  Try making a ‘thumbnail’ for each image and inserting that into the POI rather than the original image.

Also, Google sometimes gets confused about the image size.  You can specify the size in your <img> tag:

<img src=”myimage” style=”width:128px; height: 128px;” />

Or, add this to your “styles.css”:
.mapp-body img {
width: 128px;
heigh: 128px:
}

[Sonia]

Great!!!!!  Thank you very much!!!!

[Author]

Posts