user3412194 user3412194 - 5 days ago 4
CSS Question

Making an SVG CSS Map Responsive

I have a CSS map that I placed on a page. I got the map from here:
http://freehtml5maps.com/documentation/

I placed the map on my page, and it looks fine at full screen.
http://www.amazingdg.com/_client/childusa/

However, when the window size shrinks, the map isn't responsive. According to the instructions, as long as the width of the map container div is set, then the map should shrink to fit it ... but the map is staying at 960px width.

at 1200px width, I set the container width be 740px ... but the map isn't shrinking (even through the container is).

@media (max-width: 1200px)
.statebox-wrap {
width: 740px;
}


Can anyone tell me what I am doing wrong?

Here are the scripts used for the css map... I dont think any of these are wrong. I think the problem exists in the CSS code (below)



<!-- End Jquery -->
<link href="http://www.amazingdg.com/_client/childusa/lg-map/map.css" rel="stylesheet" type="text/css" />
<script src="http://www.amazingdg.com/_client/childusa/lg-map/raphael.js" type="text/javascript"></script>
<script src="http://www.amazingdg.com/_client/childusa/lg-map/scale.raphael.js" type="text/javascript"></script>
<script src="http://www.amazingdg.com/_client/childusa/lg-map/lg-map.js"></script>


And here is the relevant CSS styles (prior to the media queries)

.statebox { display:inline-block; width:100%; min-height:100px; color:#FFF; text-align:center; margin-bottom:40px; padding-bottom: 20px; }
.statebox-wrap { max-width:960px; margin:0 auto; padding: 20px 0; }
.stateboxtitle { color:#FFF; font-size:30px; padding:20px 40px 0 40px; line-height:1.2; }
.stateboxtitle span { font-size:22px;line-height:1; }

YOU YOU
Answer

Try

@media (max-width: 1200px) {
#svggroup svg {
width: 800px;
}
}

@media (max-width: 960px) {
#svggroup svg {
width: 600px;
}
}

@media (max-width: 768px) {
#svggroup svg {
width: 400px;
}
}

@media (max-width: 420px) {
#svggroup svg {
width: 200px;
}
}

Change map width accordingly.

Comments