mobile improvements

Author: mscoutermarsh

_layouts/default.html

@@ -202,7 +202,7 @@ <h2 class="text-delta">Table of contents</h2>
   <script src="/assets/js/clipboard.min.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      document.querySelectorAll('.highlight').forEach(function(block) {
+      document.querySelectorAll('div.highlight').forEach(function(block) {
         var btn = document.createElement('button');
         btn.className = 'copy-btn';
         btn.textContent = 'Copy';

_sass/custom/custom.scss

@@ -298,6 +298,10 @@ img {
   flex: 1;
   min-width: 0;
   max-width: 750px;
+  
+  @media (max-width: 800px) {
+    max-width: 100%;
+  }
 }
 
 .toc-sidebar {
@@ -604,3 +608,53 @@ p.text-delta + ul#markdown-toc {
   }
 }
 
+// =============================================================================
+// Mobile Responsive Fixes
+// =============================================================================
+
+@media (max-width: 900px) {
+  // Fix horizontal overflow on mobile
+  .main {
+    max-width: 100% !important;
+    width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .main-content-wrap {
+    max-width: 100% !important;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  
+  .content-with-toc {
+    max-width: 100%;
+  }
+  
+  .main-content table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+  }
+  
+  // Code blocks on mobile - ensure they stay within container and scroll
+  div.highlight {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    
+    pre {
+      max-width: 100%;
+    }
+    
+    code {
+      white-space: pre;
+    }
+  }
+  
+  // Hide copy button on mobile
+  .copy-btn {
+    display: none !important;
+  }
+}
+

assets/css/syntax.css

@@ -267,3 +267,20 @@ pre code {
   background: #585b70;
 }
 
+/* Mobile Responsive Styles */
+@media (max-width: 800px) {
+  /* Hide copy button on mobile (no hover on touch devices) */
+  .copy-btn {
+    display: none;
+  }
+  
+  /* Fix code block overflow */
+  .highlight {
+    max-width: 100%;
+  }
+  
+  .highlight pre {
+    max-width: 100%;
+  }
+}
+

getting-started/using-the-api.md

@@ -1,6 +1,6 @@
 ---
 layout: page
-title: API Reference - HTML/CSS to Image
+title: Using the API
 permalink: /getting-started/using-the-api/
 parent: Getting started
 nav_order: 1