Mostly working

index.html

@@ -19,7 +19,7 @@
 					display: flex;
 					align-items: flex-start;
 					justify-content: space-evenly;
-					gap: 10% 10%;
+					gap: 2em 2em;
 			}
 
 			svg {

index.js

@@ -213,19 +213,21 @@ 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 mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
+// const mapHeight = document.querySelector("#svgContainer").offsetHeight;
+const mapHeight = window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top * 0.7;
 
 const svg = d3.select("#svgContainer")
 			.append('svg')
-			.attr('width', '1300')
-         .attr('height', '1300')
+		.attr('width', mapWidth.toString())
+      .attr('height', (mapHeight).toString())
 //         .attr('viewbox', '0 0 860 500')
 	//		.attr('preserveAspectRatio', "xMidYMid meet")
 			.attr('id', 'indiaMap')
-         .call(responsivefy);
+      //   .call(responsivefy);
 
 function drawMap(world) {
-	const projection = d3.geoMercator().fitWidth(mapWidth,world)
+	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);
 
 	const states = svg.selectAll("g")