fix(docs) : Responsiveness of Document Design (#3380)

* Fix Responsiveness of Document Design
iotaledger · Oct 23, 2024 · df45633 · df45633
1 parent ac0b643
commit df45633
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css
@@ -321,6 +321,17 @@ h4 {
   }
 }
 @media screen and (max-width: 599px) {
+  .pagination-nav{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .pagination-nav__link{
+    width: 100%;
+  } 
+  .backgroundImage{
+    background-size: 125%
+  }
   h2,
   .h2 {
     font-size: 1.7rem;
@@ -418,7 +429,7 @@ h4 {
 
 /** Globals **/
 .button{
-  text-wrap: pretty;
+  text-wrap: wrap;
   color: var(--iota-white);
   background: var(--iota-hero-dark);
 }
@@ -476,3 +487,23 @@ h4 {
 .text-gray {
   color: var(--iota-gray);
 }
+
+/* Ensure equations are scrollable on smaller screens */
+.katex-display {
+  overflow-x: scroll;
+  white-space: nowrap;
+}
+
+/* Reduce font size for mobile screens */
+@media screen and (max-width: 768px) {
+  .katex-display {
+    font-size: 0.9rem;
+    display: block;
+  }
+}
+
+/* Optional: Set a max-width for the math elements to prevent overflow */
+.katex-display {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
diff --git a/docs/site/src/pages/index.module.css b/docs/site/src/pages/index.module.css
@@ -27,6 +27,11 @@
   background-size: 50% 100%;
   margin-bottom: 2rem;
 }
+@media (max-width: 599px) {
+  .backgroundImage {
+    background-size: 125% 70% !important;
+  }
+}
 
 @media (max-width: 1000px) {
   .backgroundImage {