Infowindow's width

Home Forums MapPress Support Infowindow's width

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #11453
    Sonia
    Participant

      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?

      #11455
      Chris
      Keymaster

        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.

        #11456
        Sonia
        Participant

          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?

          #11459
          Chris
          Keymaster

            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:
            }

            #11461
            Sonia
            Participant

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

            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.