Fix Surface images and overhaul mobile responsiveness for article pages

Author: TechStack Global

style.css

@@ -894,4 +894,82 @@ img {
         grid-template-columns: 1fr;
         text-align: center;
     }
-}
+}
+
+/* --- Mobile Fixes for Article Pages --- */
+@media screen and (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .post-content {
+        padding: 0;
+        max-width: 100%;
+        overflow-x: hidden;
+    }
+
+    .comparison-table-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        width: 100%;
+        margin-bottom: 2rem;
+        display: block;
+    }
+
+    .comparison-table {
+        width: 100%;
+        min-width: unset; /* Allow table to shrink or scroll */
+    }
+
+    .comparison-table th, 
+    .comparison-table td {
+        padding: 0.75rem 0.5rem;
+        font-size: 0.85rem;
+        white-space: normal; /* Allow text wrapping on mobile */
+    }
+    
+    .post-hero-img, .post-body-img {
+        width: 100% !important;
+        height: auto;
+        border-radius: 8px !important;
+    }
+
+    /* Fix sticky sidebar obscuring or overflowing */
+    .post-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        margin-top: 1rem;
+    }
+    
+    .sidebar {
+        position: static !important; /* Disable sticky on mobile */
+        width: 100%;
+    }
+    
+    .pros-cons-grid {
+        grid-template-columns: 1fr; /* Stack Pros and Cons */
+        gap: 1.5rem;
+    }
+    
+    .post-title {
+        font-size: 1.8rem;
+        line-height: 1.3;
+    }
+    
+    .faq-item h3 {
+        font-size: 1.1rem;
+    }
+    
+    .hero-ctas {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .hero-visual {
+       display: none; /* Hide abstract elements on very small screens to save space */
+    }
+}