diff --git a/_scss/api.scss b/_scss/api.scss
index 3f7e2285c..2d7e22164 100644
--- a/_scss/api.scss
+++ b/_scss/api.scss
@@ -207,6 +207,169 @@ html.theme-dark .apicontent div.dropdownmenu img {
 	color: var(--defold-blue);
 }
 
+/*******************************************************************************
+* Ref doc tables
+******************************************************************************/
+
+/* Prefer content-sized metadata columns on wide API reference tables. */
+@media (min-width: 1100px) {
+	.apicontent table {
+		table-layout: auto;
+	}
+
+	.apicontent table th:not(:last-child),
+	.apicontent table td:not(:last-child) {
+		width: 1%;
+		white-space: nowrap;
+	}
+
+	.apicontent table th:last-child,
+	.apicontent table td:last-child {
+		width: auto;
+	}
+}
+
+/* Let medium-width API tables scroll while keeping names and descriptions readable. */
+@media (min-width: 701px) and (max-width: 1100px) {
+	.apicontent table {
+		display: block;
+		width: 100%;
+		table-layout: auto;
+		overflow-x: auto;
+		white-space: nowrap;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.apicontent table th:not(:last-child),
+	.apicontent table td:not(:last-child) {
+		width: 1%;
+		min-width: 120px;
+		white-space: nowrap;
+	}
+
+	.apicontent table th:first-child,
+	.apicontent table td:first-child {
+		min-width: 150px;
+		max-width: 500px;
+		white-space: normal;
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+
+	.apicontent table th:last-child,
+	.apicontent table td:last-child {
+		width: auto;
+		max-width: 500px;
+		white-space: normal;
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+}
+
+/* Mobile-friendly tables, fixing https://github.com/defold/defold.github.io/issues/240 */
+@media (max-width: 700px) {
+	.apicontent {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.apicontent table {
+		display: block;
+		width: 100%;
+		min-width: 0;
+		overflow: visible;
+		white-space: normal;
+		background: transparent;
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	.apicontent table tbody {
+		display: block;
+	}
+
+	.apicontent table tr {
+		display: block;
+		margin: 0 0 0.85rem;
+		padding: 0.9rem 1rem;
+		background: var(--table-bg);
+		border: 1px solid var(--table-border);
+		border-radius: var(--table-radius);
+		box-shadow: var(--table-shadow);
+	}
+
+	.apicontent table tr:has(> th) {
+		display: none;
+	}
+
+	.apicontent table.compact tr:has(> th:first-child:not(:empty)) {
+		display: block;
+		margin: 1.25rem 0 0.55rem;
+		padding: 0;
+		background: transparent;
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	.apicontent table th,
+	.apicontent table td {
+		display: block;
+		width: 100% !important;
+		min-width: 0;
+		max-width: none;
+		padding: 0;
+		white-space: normal;
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+
+	.apicontent table.compact tr:has(> th:first-child:not(:empty)) th:first-child {
+		display: block;
+		color: var(--theme-heading-color);
+		font-size: 0.8em;
+		font-weight: 800;
+		text-transform: uppercase;
+	}
+
+	.apicontent table.compact tr:has(> th:first-child:not(:empty)) th:not(:first-child) {
+		display: none;
+	}
+
+	.apicontent table td + td {
+		margin-top: 0.45rem;
+	}
+
+	.apicontent table td:empty {
+		display: none;
+	}
+
+	.apicontent table td:first-child {
+		font-weight: 700;
+	}
+
+	.apicontent table td:last-child {
+		color: var(--theme-copy-color);
+	}
+
+	.apicontent table td code {
+		white-space: normal;
+		overflow-wrap: anywhere;
+	}
+
+	.apicontent table table {
+		margin-top: 0.65rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.apicontent table th,
+	.apicontent table td {
+		font-size: 0.85em;
+	}
+}
+
 /*******************************************************************************
 * Ref doc anchor links
 ******************************************************************************/
diff --git a/_scss/defold.scss b/_scss/defold.scss
index 1ab0bda14..ee6bcda81 100644
--- a/_scss/defold.scss
+++ b/_scss/defold.scss
@@ -5474,73 +5474,11 @@ dd {
 	}
 }
 
-/* Prefer content-sized metadata columns on wide API reference tables. */
-@media (min-width: 1101px) {
-	.apicontent table {
-		table-layout: auto;
-	}
-
-	.apicontent th:not(:last-child),
-	.apicontent td:not(:last-child) {
-		width: 1%;
-		white-space: nowrap;
-	}
-
-	.apicontent th:last-child,
-	.apicontent td:last-child {
-		width: auto;
-	}
-}
-
-/* Responsive tables for API reference */
-@media (max-width: 1100px) {
-	.apicontent table {
-		display: block;
-		width: 100%;
-		overflow-x: auto;
-		white-space: nowrap;
-		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
-	}
-}
-
-@media (max-width: 1100px) {
-	.apicontent th,
-	.apicontent td {
-		white-space: nowrap;
-		min-width: 120px; /* Minimum width to ensure readability */
-	}
-	
-	/* Ensure first column (usually function names) has more space */
-	.apicontent th:first-child,
-	.apicontent td:first-child {
-		min-width: 150px;
-	}
-	
-	/* Limit last column width to reduce excessive scrolling */
-	.apicontent th:last-child,
-	.apicontent td:last-child {
-		max-width: 500px;
-		white-space: normal; /* Allow text wrapping in description column */
-		word-wrap: break-word;
-	}
-}
-
 /* Extra small screens */
 @media (max-width: 480px) {
 	dd {
 		margin-left: 0.5em;
 	}
-	
-	.apicontent th,
-	.apicontent td {
-		min-width: 100px;
-		font-size: 0.85em; /* Slightly smaller text on very small screens */
-	}
-	
-	.apicontent th:first-child,
-	.apicontent td:first-child {
-		min-width: 130px;
-	}
 }
 
 /*******************************************************************************