CSS fixes to mobile view

VishalS99 · Jul 23, 2021 · 33f5ced · 33f5ced
1 parent 8a90478
commit 33f5ced
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/index.css b/index.css
@@ -8,6 +8,7 @@
 html,
 body {
   height: 100%;
+  scroll-behavior: smooth;
 }
 
 canvas {
@@ -184,6 +185,7 @@ canvas {
   justify-content: center;
   align-items: center;
   padding-top: 2%;
+  flex-wrap: wrap;
 }
 
 /* Style the buttons that are used to open the tab content */
@@ -217,8 +219,6 @@ canvas {
   display: none;
   padding: 6px 12px;
   border-top: none;
-}
-.tabcontent {
   animation: fadeEffect 1s; /* Fading effect takes 1 second */
 }
 
@@ -300,24 +300,58 @@ li {
 }
 
 @media only screen and (max-width: 700px) {
+  .exp-block {
+    border: 0.3em solid #7e0152;
+    width: 76%;
+  }
   .ex-title {
-    font-weight: bolder;
     font-family: "Inconsolata";
-    font-size: 2.2em;
-    text-align: center;
+    font-size: 2.1em;
+    text-align: justify;
   }
 
   .ex-dur {
-    font-weight: bolder;
     font-family: "Inconsolata";
-    /* text-align: center; */
-    /* float: center; */
+    float: left;
+    margin: 0.6em;
     font-size: 0.5em;
   }
+  .ex-desc {
+    padding-top: 1em;
+  }
+  li {
+    font-family: "Inconsolata";
+    font-size: 1.2em;
+    margin: 0.6em;
+  }
 }
 .ex-links {
   color: #ffe396;
   font-family: "Inconsolata";
   font-size: 1.2em;
   font-style: italic;
 }
+.dheader {
+  overflow: hidden;
+}
+
+#scrollbtn {
+  position: fixed;
+  bottom: 5%;
+  border: 0;
+  right: 3%;
+  z-index: 100;
+  cursor: pointer;
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
+  background-color: transparent;
+}
+#scrollbtn i {
+  color: white;
+  font-size: 3em;
+}
+
+#scrollbtn i:hover {
+  color: #ffe396;
+}
diff --git a/index.html b/index.html
@@ -13,6 +13,8 @@
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <link rel="stylesheet" href="index.css" />
     <script
       src="https://code.jquery.com/jquery-1.12.4.min.js"
@@ -22,6 +24,8 @@
   </head>
 
   <body>
+    <button onclick="scrollBottom()" id="scrollbtn"> <i class="fa fa-arrow-circle-down"></i></button>
+
     <div id="container" class="dheader">
       <div id="overlay-rain back-row-toggle splat-toggle">
         <div class="rain front-row"></div>
@@ -60,7 +64,6 @@
     <div id="container" class="dbody">
       <div class="tab">
         <button id="defaultTab"  class="tablinks" onclick="openTab(event, 'Education')">
-
           EDUCATION
         </button>
         <button
@@ -99,7 +102,7 @@
       <div id="Experience" class="tabcontent">
         <div class="exp-block">
 
-          <h1 class="ex-title">SDE INTERN - Oracle India<span class="ex-dur">May - June 2020</span></h1>
+          <h1 class="ex-title">SDE INTERN- Oracle India<span class="ex-dur">May - June 2020</span></h1>
           <p class="ex-desc">
             <ul>
               <li>Interned with the Identity Management group</li>
@@ -149,6 +152,7 @@ <h1 class="ex-title">WEB DEVELOPER - Spider R&D, NIT Trichy<span class="ex-dur">
     </div>
   </body>
   <script>
+
     $("#defaultTab").click();
 
     function openTab(e, tab) {
@@ -164,6 +168,20 @@ <h1 class="ex-title">WEB DEVELOPER - Spider R&D, NIT Trichy<span class="ex-dur">
       e.target.className += " active";
       console.log(e.target.className);
     }
+
+    function scrollBottom(){
+      document.getElementsByClassName("dbody")[0].scrollIntoView({});
+      $("#scrollbtn").html('<i class="fa fa-arrow-circle-up"></i>')
+      $("#scrollbtn").attr("onclick", "scrollToTop()");
+    }
+    function scrollToTop(){
+      document.getElementsByClassName("dheader")[0].scrollIntoView({});
+      $("#scrollbtn").html('<i class="fa fa-arrow-circle-down"></i>')
+      $("#scrollbtn").attr("onclick", "scrollBottom()");
+      console.log($(this))
+    }
+
+
   </script>
   <script src="design.js"></script>
   <script src="rain.js"></script>