Skip to content

Commit 3fa2287

Browse files
authored
Fix issue with css on mobile (#157)
* fix issue on mobile * apply only for manuals and tutorials * fixes for api documentation
1 parent de23340 commit 3fa2287

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

_scss/defold.scss

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1447,6 +1447,82 @@ dd {
14471447
grid-column-start: 2;
14481448
}
14491449

1450+
/* Mobile-friendly definition lists - only for manual content, not API reference */
1451+
@media (max-width: 1130px) {
1452+
/* Apply to manual and tutorial pages only */
1453+
.manual dl,
1454+
.tutorial dl {
1455+
display: block !important;
1456+
grid-template-columns: unset !important;
1457+
}
1458+
1459+
.manual dt,
1460+
.tutorial dt {
1461+
display: block !important;
1462+
grid-column-start: unset !important;
1463+
font-weight: bold;
1464+
margin: 1em 0 0.5em 0;
1465+
}
1466+
1467+
.manual dd,
1468+
.tutorial dd {
1469+
display: block !important;
1470+
grid-column-start: unset !important;
1471+
margin: 0 0 1.5em 1em;
1472+
}
1473+
}
1474+
1475+
/* Responsive tables for API reference */
1476+
@media (max-width: 1100px) {
1477+
.apicontent table {
1478+
display: block;
1479+
width: 100%;
1480+
overflow-x: auto;
1481+
white-space: nowrap;
1482+
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
1483+
}
1484+
}
1485+
1486+
@media (max-width: 1100px) {
1487+
.apicontent th,
1488+
.apicontent td {
1489+
white-space: nowrap;
1490+
min-width: 120px; /* Minimum width to ensure readability */
1491+
}
1492+
1493+
/* Ensure first column (usually function names) has more space */
1494+
.apicontent th:first-child,
1495+
.apicontent td:first-child {
1496+
min-width: 150px;
1497+
}
1498+
1499+
/* Limit last column width to reduce excessive scrolling */
1500+
.apicontent th:last-child,
1501+
.apicontent td:last-child {
1502+
max-width: 500px;
1503+
white-space: normal; /* Allow text wrapping in description column */
1504+
word-wrap: break-word;
1505+
}
1506+
}
1507+
1508+
/* Extra small screens */
1509+
@media (max-width: 480px) {
1510+
dd {
1511+
margin-left: 0.5em;
1512+
}
1513+
1514+
.apicontent th,
1515+
.apicontent td {
1516+
min-width: 100px;
1517+
font-size: 0.9em; /* Slightly smaller text on very small screens */
1518+
}
1519+
1520+
.apicontent th:first-child,
1521+
.apicontent td:first-child {
1522+
min-width: 130px;
1523+
}
1524+
}
1525+
14501526
/*******************************************************************************
14511527
* Example page
14521528
******************************************************************************/

0 commit comments

Comments
 (0)