DMXzone Google Maps Support Product Page
Answered
Why is zoom / scale / street view man deformed and almost invisible?
Asked 11 Nov 2012 13:56:24
1
has this question
11 Nov 2012 13:56:24 Ian Musk posted:
DMX Google Maps 1.2.0. What am I missing? When I make a map that has 100% width and fixed pixel height, the zoom/scale/steetview man (top left in map window normally) are deforemd and not properly visible or accessible. See here: www.utleiexperten.no/utleie-xperten-moss2.html on this page I thought maybe responsive columns was messing things up so duplicated map at bottom with no column constraints. On the next link which is based on your 3D flipping template everything is ok www.ianmusk.no/inspirasjon/html5-3d-flipping/contact.html I have compared the code for the above two links and must be missing something as to why your template page is ok but my page is not. Get same result when set fixed width instead of % (see first link above). Get same results in IE9, Chrome and FF. I also tried deleting and reinserting map on my page, n luck. I also tried inserting map to blank page and then all ok, but when I cut and paste code into above link then zoom / scale is deformed. Tried deleting different javascripts in header but no luck. So what am I missing? Replies
Replied 11 Nov 2012 16:45:40
11 Nov 2012 16:45:40 Ian Musk replied:
I found out what it was. It is DW responsive CSS doing it. When you make a responsive site in DWCS6 it automatically generates a style sheet to control the column widths (as well as a boilerplate style sheet). At the begining of the fulig grid style sheet DW automatically inserts this block: @charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width:100%;
}
This is where the problem. When "img" gets a max width 100% value then the zoom/scale/street map man icon get deformed. By setting this to max-width:none in my styelsheet that controls the styling of my divs gets around the problem. I used this in my styling: .dmxGoogleMaps img {
max-width: none;
}
I left the links i refered to previously unfixed so you could see. Here is the fixed page: www.utleiexperten.no/utleie-xperten-moss.html
Is there still anything I am missing in my fix?
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width:100%;
}
This is where the problem. When "img" gets a max width 100% value then the zoom/scale/street map man icon get deformed. By setting this to max-width:none in my styelsheet that controls the styling of my divs gets around the problem. I used this in my styling: .dmxGoogleMaps img {
max-width: none;
}
I left the links i refered to previously unfixed so you could see. Here is the fixed page: www.utleiexperten.no/utleie-xperten-moss.html
Is there still anything I am missing in my fix?
Replied 11 Nov 2012 18:52:37
11 Nov 2012 18:52:37 Teodor Kuduschiev replied:
Hello Ian,
It is the responsive CSS that puts max width of 100% to any image element on your page.
The "fix" you used is the only thing needed in order to resolve the issue.
It is the responsive CSS that puts max width of 100% to any image element on your page.
The "fix" you used is the only thing needed in order to resolve the issue.
Replied 11 Nov 2012 19:19:23
11 Nov 2012 19:19:23 Ian Musk replied:
Tks for yr confirmation. :-)