style: Enhance mobile image layout with text width condition

freenet · Nov 30, 2024 · f8105ae · f8105ae
1 parent 0fd576e
commit f8105ae
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/hugo-site/themes/freenet/assets/css/freenet.css b/hugo-site/themes/freenet/assets/css/freenet.css
@@ -319,12 +319,17 @@ p.page-end-spacer {
     }
 
     /* Mobile image handling */
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 480px), 
+           (min-width: 481px) and (max-width: 800px) and (min-content-width: < 200px) {
         div[style*="float: right"] {
             float: none !important;
             margin: 0 auto 20px auto;
             display: block;
         }
+
+        div[style*="float: right"] + p {
+            min-width: 200px; /* Ensures at least ~10 words can fit */
+        }
     }
 
     .navbar-item.ghost-key:hover {