Seeking guidance on integrating a map into the second column of a responsive website. Acknowledging that my code may not be optimal, as this is my first attempt at such a task. After a day of searching for solutions, I'm feeling quite desperate.
HTML
<div class="section group">
<div class="col span_1_of_2">
</div>
<div class="col span_1_of_2">
<div id="map-canvas"></div>
</div>
</div>
CSS
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
#map-canvas {
height: 100%;
width: 100%;
}
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2, #map-canvas { width: 100%; }
}
Javascript code can be found in the following links:
http://codepen.io/anon/pen/doZBGb If the CodePen link is not functional: https://gist.github.com/anonymous/161951ccd66d110aed83
Any assistance or suggestions are greatly appreciated.