fix(*): adj responsiveness

src/Components/Form/Contact.css

@@ -47,21 +47,30 @@
   opacity: 0.6;
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 768px) {
+  .contact-container form {
+    width: 80% !important;
+  }
   .contact-container {
-    width: 100%;
+    height: 30vh;
   }
 }
 @media only screen and (max-width: 480px) {
   .contact-container {
     width: 100vw;
   }
+  .contact-container p {
+    width: 80%;
+  }
   .contact-container .contact-input {
     width: 170%;
   }
   .contact-container textarea {
     width: 170%;
   }
+  .contact-container {
+    height: 40vh;
+  }
 }
 /* @media only screen and (min-width: 480px) {
     .contact-container {

src/Components/Form/ContactForm.jsx

@@ -31,7 +31,6 @@ const ContactForm = () => {
                 <input className='contact-input' type="text" name="name" placeholder="Name" />
                 <input className='contact-input' type="email" name="email" placeholder="Enter Email" />
                 <textarea className='area' name="message" placeholder='Your Message' />
-                <div style={{color: 'white', fontSize: '2rem'}}  onClick={handleNotification}>Test</div>
                 <StyledFormSubmit  onClick={handleNotification} type="submit" value="Submit"/>
             </form>
         </div>

src/Components/Timeline/timeline.css

@@ -31,9 +31,9 @@
 .left {
   margin-left: 4rem;
 }
-*/
-  /* Place the container to the left */
-  .left {
+
+/* Place the container to the left */
+.left {
   left: 0%;
 }
 
@@ -61,76 +61,22 @@
 }
 
 /* Media queries - Responsive timeline on screens less than 600px wide */
-@media only screen and (max-width: 480px) {
-  /* Logo  */
-  .imageHiglights {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0px;
-  }
-  .middleHightlights {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 90%;
-    line-height: 1;
-    margin-top: 20px;
-  }
-  .a-content {
-    color: black;
-    width: 100%;
-    font-size: 1.5rem;
-    text-align: center;
-    line-height: 30px;
-  }
-
-  .middleHightlights h2 {
-    font-size: 2.1em;
-    text-align: center;
-  }
-  .breakdown {
-    width: 90%;
-    font-size: 1.2em;
-  }
-  .rightHighlights,
-  .leftHighlights {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+@media only screen and (max-width: 768px) {
+  .about-container {
     width: 100%;
-    height: 60%;
   }
-  /* Logo End */
-
-  /*Timeline  */
-
-  .timeline {
-    margin: 0;
+  .content {
     width: 100%;
+    padding: 60px 0px;
   }
-
-  .timelineP {
-    font-size: 1.2em;
-  }
-
   /* The timeline line and bullet points */
   .timeline::after {
     display: none;
   }
 
-  /* Container around content */
-  .container {
-    padding: 10px 40px;
-    position: relative;
-    width: 100%;
-  }
-
   /* Place the container to the left */
   .left {
-    left: 0;
+    margin-left: 0;
   }
 
   /* Place the container to the right */
@@ -148,49 +94,35 @@
   .about-container::after {
     display: none;
   }
-  /* About  */
-  .about {
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    padding-top: 50px;
-    background-color: #1a1e23;
-  }
-  .about-container {
-    width: 80%;
   }
-
-  .aboutHeader {
+  .timelineP {
     font-size: 2.5rem;
-    margin-bottom: 10px;
-    text-align: center;
-    color: white;
+    line-height: 1.4;
   }
-  .aboutImage {
-    width: 100%;
-    height: 50vh;
+  .content h2 {
+    font-size: 3rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .timelineP {
+    font-size: 2rem;
   }
-  .aboutP {
-    font-size: 1.5rem;
-    color: white;
-    text-align: center;
+  .content {
+    padding: 20px 20px;
   }
-  .leftAbout {
-    margin: 0;
-    font-family: "Times New Roman", Times, serif;
-    line-height: 2;
+  .content h2 {
+    font-size: 2.3rem;
   }
-  .rightAbout {
-    opacity: 0.7;
-    margin: 0;
+  .left {
+    margin-left: 0;
   }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  .right {
+    left: 0;
   }
 }

src/Pages/Articles/Article/Article.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import { GlobalState } from '../../../GlobalState';
 import '../Articles.css'
 import PermIdentityIcon from '@material-ui/icons/PermIdentity';
@@ -58,6 +58,7 @@ const ArticleItem = () => {
                                     <br />
                                     <p className='blog-content-info'  dangerouslySetInnerHTML={{ __html: marked(markdown) }}></p>
                                     <br />
+                                    <Link to='/blog'>Back</Link>
                                 </section>
                                 {/* <input type="checkbox" checked={checked}
                                     onChange={() => props.handleCheck(_id)} /> */}
@@ -67,7 +68,6 @@ const ArticleItem = () => {
                     </div>
                 </article>
             </main>
-            <hr style={{ background: 'rgb(235,183,65)', width: '100%' }} />
         </>
     )
 }

src/Pages/Articles/Articles.css

@@ -69,7 +69,7 @@
   grid-template-columns: 3fr 1fr;
   grid-column-gap: 2rem;
   margin-top: 5rem;
-  padding-bottom: 10%;
+  padding: 0% 4% 10% 4%;
 }
 
 .article-header {
@@ -464,3 +464,33 @@
 .blog-categories h6 {
   text-transform: uppercase;
 }
+
+@media only screen and (max-width: 768px) {
+  .article-sidebar {
+    display: none;
+  }
+  .article-box {
+    grid-template-columns: 1fr;
+    padding: 4%;
+  }
+  .article-card {
+    display: block;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .article-box {
+    padding: 8%;
+  }
+  .article-card-header {
+    font-size: 3rem !important;
+  }
+  .work-content {
+    font-size: 2rem !important;
+  }
+
+  .article-header,
+  .blog-tabs,
+  #tabs {
+    display: none;
+  }
+}