diff --git a/css/card.css b/css/card.css
index e525591..59c0003 100644
--- a/css/card.css
+++ b/css/card.css
@@ -4,7 +4,6 @@
   margin: 3% auto;
   border-radius: 30px;
   display: flex;
-  /* justify-content: space-between; */
   justify-content: center;
   align-items: center;
   padding-top: 1%;
@@ -106,3 +105,9 @@
     transform: scale(1);
   }
 }
+
+@media(max-width: 768px) {
+  .card {
+    height: 35vmin;
+  }
+}
diff --git a/css/clover.css b/css/clover.css
index 42b74f9..8dcc31b 100644
--- a/css/clover.css
+++ b/css/clover.css
@@ -1,7 +1,7 @@
 body {
   height: 100vh;
   width: 100vw;
-  background-image: linear-gradient(to right, #FFC0CB, #ffffff);
+  background-image: linear-gradient(135deg, #FFC0CB, #ffffff);
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -25,8 +25,8 @@ body {
 
 .clover::before {
   content: '';
-  width: 200px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
   background-color: #bdd8cf;
   position: absolute;
@@ -35,8 +35,8 @@ body {
 
 .clover::after {
   content: '';
-  width: 200px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
   background-color: #bdd8cf;
   position: absolute;
@@ -97,3 +97,15 @@ body {
   font-weight: bolder;
   color: #333333;
 }
+
+@media (max-width: 768px) {
+  .box {
+    width: 300px;
+    height: 300px;
+  }
+
+  .clover {
+    width: 100px;
+    height: 100px;
+  }
+}
diff --git a/css/page.css b/css/page.css
index 043735a..325ad61 100644
--- a/css/page.css
+++ b/css/page.css
@@ -63,3 +63,25 @@
   margin-left: 1%;
   margin-right: 1%;
 }
+
+@media(max-width: 768px) {
+  .time {
+    padding-top: 10vmin;
+  }
+
+  .page>.time>#time {
+    padding-top: 10vmin;
+  }
+
+  .page>.jump {
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 10vmin;
+    padding-bottom: 10vmin;
+  }
+
+  .page>.jump>a {
+    width: 60vmin;
+  }
+}
diff --git a/pages/story.html b/pages/story.html
index a551f34..1ad2ebf 100644
--- a/pages/story.html
+++ b/pages/story.html
@@ -125,8 +125,6 @@ <h2 class="endtitle">我们的故事，未完待续……</h2>
 
   </div>
 
-
-
   <script type="module" src="../scripts/timeline.js"></script>
 </body>