Merge pull request #1109 from Developer-Swati/fix-issue-#1102

Added a scrollbar in shlok page
akshitagupta15june · Jul 17, 2023 · 8bb8579 · 8bb8579
2 parents 24258a9 + f5a8674
commit 8bb8579
Show file tree

Hide file tree

Showing 2 changed files with 222 additions and 158 deletions.
diff --git a/shlok_page/motivation.css b/shlok_page/motivation.css
@@ -278,6 +278,43 @@ p:hover {
   }
 }
 
+=======
+}
+
+@media screen and (max-width: 414px){
+  section{
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    align-items: center;
+    position: relative;
+    top: 100px;
+  }
+}
+
+@media screen and (min-width: 415px) and (max-width: 1023px) {
+  .block__main {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 414px){
+  .block{
+    height: 100vh;
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 414px){
+  section{
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    align-items: center;
+    position: relative;
+    top: 100px;
+  }
+}
 
 .block__back {
   transform: rotateY(180deg);
@@ -385,4 +422,24 @@ section {
   display: flex;
   justify-content: center;
   align-items: center;
+
+}
+
+/*Adding style to scrollbar*/
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(250, 250, 250);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(transparent, #c193b0  )!important;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(transparent, rgb(0, 13, 6));
+
 }