Made some progress

index.html

@@ -114,14 +114,14 @@
 			}
 
 			/* Position map load spinner in the middle of the SVG */
-			.svgContainer {
+			#svgContainer {
 					position: relative;
 					display: inline-block;
 					flex-grow: 1;
-					height: 1000px;
+               max-width: 100%;
 			}
 
-			.svgContainer .mapLoadSpinner {
+			#svgContainer .mapLoadSpinner {
 					position: absolute;
 					top: 40%;
 					left: 40%;
@@ -181,6 +181,7 @@
 			@media only screen and (max-width: 768px) {
 					main {
 							flex-direction: column;
+                     align-items: stretch;
 					}
 			}
 
@@ -202,7 +203,7 @@
 		</noscript>
 		</section>
 
-		<section class="svgContainer">
+		<section id="svgContainer">
 			<div id="mapLoadSpinner" class="mapLoadSpinner"></div>
 		</section>
 		</main>

index.js

@@ -1,13 +1,3 @@
-//	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
-//	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
-	const mapWidth = window.innerWidth - document.querySelector(".svgContainer").offsetWidth;
-
-const svg = d3.select(".svgContainer")
-			.append('svg')
-			.attr('width', '100%')
-			.attr('preserveAspectRatio', "xMinYMin meet")
-			.attr('id', 'indiaMap');
-
 const defaultColor = "#555555"
 
 const languages = {
@@ -137,6 +127,33 @@ const district2lang = { // Should override state colors
    "Bahraich": languages["awadhi"],
 }
 
+function responsivefy(svg) {
+    // get container + svg aspect ratio
+    var container = d3.select(svg.node().parentNode),
+        width = parseInt(svg.style("width")),
+        height = parseInt(svg.style("height")),
+        aspect = width / height;
+
+    // add viewBox and preserveAspectRatio properties,
+    // and call resize so that svg resizes on inital page load
+    svg.attr("viewBox", "0 0 " + width + " " + height)
+        .attr("perserveAspectRatio", "xMinYMid")
+        .call(resize);
+
+    // to register multiple listeners for same event type,
+    // you need to add namespace, i.e., 'click.foo'
+    // necessary if you call invoke this function for multiple svgs
+    // api docs: https://github.com/mbostock/d3/wiki/Selections#on
+    d3.select(window).on("resize." + container.attr("id"), resize);
+
+    // get width of container and resize svg to fit it
+    function resize() {
+        var targetWidth = Math.floor(container.node().getBoundingClientRect().width);
+        svg.attr("width", targetWidth);
+        svg.attr("height", Math.round(targetWidth / aspect));
+    }
+}
+
 // Functions for calculating and dealing with language boundaries
 function reverseCoordArrays(coords) {
     if (!Array.isArray(coords)) {
@@ -193,6 +210,20 @@ function stateOrDistrictOrLanguage(d) {
 	}
 }
 
+
+//	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
+//	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
+const mapWidth = window.innerWidth - document.querySelector("#svgContainer").offsetWidth;
+
+const svg = d3.select("#svgContainer")
+			.append('svg')
+			.attr('width', '1300')
+         .attr('height', '1300')
+//         .attr('viewbox', '0 0 860 500')
+	//		.attr('preserveAspectRatio', "xMidYMid meet")
+			.attr('id', 'indiaMap')
+         .call(responsivefy);
+
 function drawMap(world) {
 	const projection = d3.geoMercator().fitWidth(mapWidth,world)
 	const path = d3.geoPath().projection(projection);