3 files changed, 19 insertions, 6 deletions
diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
index 7ca1969..ca2da16 100644
--- a/src/lib/sections/Collections.svelte
+++ b/src/lib/sections/Collections.svelte
@@ -42,10 +42,11 @@
 <style>
 	ul {
 		margin: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 0;
+		display: flex;
+		flex-wrap: wrap;
 		width: fit-content;
+		/* this ensures there's at most 2 lines */
+		max-width: 30em;
 	}
 
 	ul > :global(li) {
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
index 6af64e9..84480ea 100644
--- a/src/lib/sections/Inventories.svelte
+++ b/src/lib/sections/Inventories.svelte
@@ -124,4 +124,16 @@
 	.inventory-tab-active {
 		background-color: rgba(40, 40, 40, 0.9);
 	}
+
+	@media only screen and (max-width: 480px) {
+		.inventory-content:global(#inventory .item) {
+			/* there's no good way to override the existing 32px size without !important :( */
+			font-size: 24px !important;
+		}
+	}
+	@media only screen and (max-width: 350px) {
+		.inventory-content:global(#inventory .item) {
+			font-size: 16px !important;
+		}
+	}
 </style>
diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte
index fd720f9..34f7339 100644
--- a/src/lib/sections/Skills.svelte
+++ b/src/lib/sections/Skills.svelte
@@ -64,9 +64,9 @@
 
 	ul {
 		margin-top: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 2em;
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 30em;
 	}
 	ul > li {
 		width: 10em;