From 4935d2d3877a6205008d89def8d2ba43f7e06275 Mon Sep 17 00:00:00 2001
From: Yudong Jin <krahets@163.com>
Date: Sun, 19 Apr 2026 02:23:31 +0800
Subject: [PATCH] fix mobile reading media overflow (#1896)

---
 overrides/stylesheets/extra.css          | 13 +++++++++++++
 overrides/zensical/stylesheets/extra.css | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/overrides/stylesheets/extra.css b/overrides/stylesheets/extra.css
index eaa2f5bcb..3be9eb166 100644
--- a/overrides/stylesheets/extra.css
+++ b/overrides/stylesheets/extra.css
@@ -284,6 +284,7 @@ body {
 .home-div {
   width: 100%;
   height: auto;
+  box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -624,6 +625,18 @@ a:hover .text-button span {
     height: min(78vw, 32rem);
     margin: 0 0 1em;
   }
+
+  .media-block>a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .media-block .device-on-hover {
+    max-width: 100%;
+  }
 }
 
 .video-container {
diff --git a/overrides/zensical/stylesheets/extra.css b/overrides/zensical/stylesheets/extra.css
index db5f0d93a..96f7453b8 100644
--- a/overrides/zensical/stylesheets/extra.css
+++ b/overrides/zensical/stylesheets/extra.css
@@ -383,6 +383,7 @@ html:has(body[data-md-color-scheme="default"]) {
 .home-div {
   width: 100%;
   height: auto;
+  box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -805,4 +806,16 @@ a:hover .device-on-hover {
     height: min(78vw, 32rem);
     margin: 0 0 1em;
   }
+
+  .media-block>a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .media-block .device-on-hover {
+    max-width: 100%;
+  }
 }