diff --git a/account.html b/account.html
index d08e9ba..c21a647 100644
--- a/account.html
+++ b/account.html
@@ -9,7 +9,41 @@
 		<link rel="stylesheet" href="css/style.css">
 		<link rel="stylesheet" href="css/nav.css">
 		<script src="scripts/account.js" type="module"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chart.js" type="module"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+		<style>
+			@media screen and (width >= 1264px){
+				#resource-container {
+					display: flex; 
+					flex-direction: row; 
+					gap: 0px;
+					flex-wrap: nowrap;
+					justify-content: left;
+				}
+				#resource-container > * {
+					position: relative;
+					min-width: 200px;
+					width: 100%;
+					aspect-ratio: 1 / 1;
+				}
+			}
+			@media screen and (width <= 1264px) and (width >= 480px) {
+				#resource-container {
+					display: grid;
+					grid-template-columns: repeat(auto-fill, 200px);
+					grid-gap: 0px;
+					justify-content: space-between;
+				}
+			}
+			@media screen and (width <= 480px) {
+				#resource-container {
+					display: flex;
+					flex-direction: column;
+					gap: 0px;
+					flex-wrap: nowrap;
+					justify-content: center;
+				}
+			}
+		</style>
 	</head>
 	<body>
 		<header>
@@ -35,7 +69,7 @@
 				</div>
 				<div class="w3-card w3-padding">
 					<h3>Cluster Resources</h3>
-					<div id="resource-container" style="display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 10px;"></div>
+					<div id="resource-container"></div>
 				</div>
 			</section>
 		</main>
diff --git a/scripts/account.js b/scripts/account.js
index 4d7244c..efc0c52 100644
--- a/scripts/account.js
+++ b/scripts/account.js
@@ -53,9 +53,6 @@ function buildResourceTable (containerID, resources) {
 
 function createResourceUsageChart (resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
 	const container = document.createElement("div");
-	// layout fits 6 resources per row on large screens
-	// max width = (100% [parent] - 50px [5 flexbox col gap]) / 6
-	container.style = "position: relative; min-width: 200px; width: 100%; max-width: calc((100% - 50px) / 6); aspect-ratio: 1;";
 	const canvas = document.createElement("canvas");
 	container.append(canvas);
 	const maxStr = parseNumber(resourceMax, resourceUnitData);
