fixed mobile view issue

sunilyadav8 · Jan 7, 2022 · 4d65234 · 4d65234
1 parent d4afc5c
commit 4d65234
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/$HOME/.npmrc b/$HOME/.npmrc
diff --git a/.npmrc b/.npmrc
diff --git a/src/components/About/About.js b/src/components/About/About.js
@@ -44,9 +44,9 @@ function About() {
             <h1 className="project-heading">
               <strong className="purple">Tools</strong> I use
             </h1>
-            {TOOLS.map((skill, index) => (
-              <ul key={index} className="skill-name">
-                <li>{skill}</li>
+            {TOOLS.map((tool, index) => (
+              <ul key={index} className="tool-name">
+                <li>{tool}</li>
               </ul>
             ))}
           </Col>

diff --git a/src/components/About/Techstack.js b/src/components/About/Techstack.js
@@ -6,7 +6,7 @@ function Techstack(props) {
   return (
     <>
     <Row style={{ justifyContent: "left", paddingBottom: "10px" }}>
-       <Col className="skill-name">
+       <Col className="skill-name" xs={4}>
         {props.name}
       </Col>
       <Col xs={6}>
@@ -15,6 +15,7 @@ function Techstack(props) {
           start={0}
           stop={5}
           initialRating={props.initialRating}
+          className="rating"
         />
       </Col>
     </Row>

diff --git a/src/style.css b/src/style.css
@@ -22,6 +22,20 @@ html {
   background-position: center;
 }
 
+@media (max-width: 767px) {
+    #preloader {
+      position: fixed;
+      top: 30%;
+      left: 20%;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      background-position: center;
+  }
+}
+
 #preloader-none {
   opacity: 0;
 }
@@ -745,6 +759,14 @@ html {
   text-align: left;
   margin-left: 10%;
 }
+.rating {
+  width: 170px;
+  background-color: white;
+}
+.tool-name {
+  text-align: left;
+  margin-left: 10%;
+}
 .skill-wrapper {
   border-right: 1px solid #414141;
   box-shadow: 0 4px 5px 3px rgba(59, 56, 59, 0.459) !important;