diff --git a/_scss/defold.scss b/_scss/defold.scss index 1f3e9db5e..0b20f56f3 100644 --- a/_scss/defold.scss +++ b/_scss/defold.scss @@ -1447,6 +1447,82 @@ dd { grid-column-start: 2; } +/* Mobile-friendly definition lists - only for manual content, not API reference */ +@media (max-width: 1130px) { + /* Apply to manual and tutorial pages only */ + .manual dl, + .tutorial dl { + display: block !important; + grid-template-columns: unset !important; + } + + .manual dt, + .tutorial dt { + display: block !important; + grid-column-start: unset !important; + font-weight: bold; + margin: 1em 0 0.5em 0; + } + + .manual dd, + .tutorial dd { + display: block !important; + grid-column-start: unset !important; + margin: 0 0 1.5em 1em; + } +} + +/* 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.9em; /* Slightly smaller text on very small screens */ + } + + .apicontent th:first-child, + .apicontent td:first-child { + min-width: 130px; + } +} + /******************************************************************************* * Example page ******************************************************************************/