optimize Mobile UI on Meditation

hppanpaliya · Apr 26, 2023 · 433a3a7 · 433a3a7
1 parent 9aca5d0
commit 433a3a7
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/components/GuidedMeditation/GuidedMeditation.css b/src/components/GuidedMeditation/GuidedMeditation.css
@@ -4,7 +4,7 @@
   text-align: center;
   font-family: Arial, sans-serif;
   background-color: #f5f5f5;
-  border-radius: 10px;
+  border-radius: 0px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   background-position: center;
   background-repeat: no-repeat;
@@ -24,6 +24,19 @@
 .guided-meditation-page {
   overflow: hidden;
 }
+@media (min-width: 600px) {
+  /* Styles for screens wider than 600px (desktop) */
+  .guided-meditation-page {
+    height: calc(100svh - 64px);
+  }
+}
+
+@media (max-width: 599px) {
+  /* Styles for screens narrower than 600px (mobile) */
+  .guided-meditation-page {
+    height: calc(100svh - 50px);
+  }
+}
 
 .stylish-select {
   font-family: "Roboto", sans-serif;