mobile

Author: sahilsian

comps/header/index.js

@@ -12,6 +12,9 @@ import { useRouter } from 'next/router'
 
 const SiteHeader = styled.header`
     margin-bottom: 10em;
+    @media screen and (max-width: 787px) {
+        margin-bottom: 3em;
+    }
 `;
 
 const HeaderContainer = styled.div`

comps/homecontent/index.js

@@ -15,7 +15,9 @@ const Margin = styled.div`
     width: 100%;
     max-width: 1200px;
     margin: 0px auto;
-    padding: 70px 0px;
+    padding: 70px 15px;
+
+    
 `;
 
 const ExtendedMargin = styled.div`
@@ -35,6 +37,9 @@ const ComingSoonBox = styled.div`
     padding: 30px 70px;
     display: flex;
     background-color: #fff;
+
+    
+    
 `;
 
 const Heading = styled.p`
@@ -56,12 +61,19 @@ const SubHeading = styled.p`
 const FlexText = styled.div`
     flex: 1;
     padding: 0px 10px;
+    @media screen and (max-width: 787px) {
+        text-align: center;
+    }
+    
 `;
 
 const FlexImage = styled.div`
     flex: 1;
     padding: 0px 10px;
     display: flex;
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const P = styled.p`
@@ -74,6 +86,10 @@ const Avatar = styled.img`
     height: 150px;
     box-shadow: 1px 1px 5px #eeeeee;
     position: relative;
+
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const InterestWrap = styled.div`
@@ -82,6 +98,10 @@ const InterestWrap = styled.div`
     display: flex;
     align-items: flex-end;
     padding: 0px 20px;
+
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const Interest = styled.p`
@@ -102,11 +122,17 @@ const Details = styled.div`
     padding: 50px 10px;
     display: flex;
     flex-direction: row-reverse;
+    @media screen and (max-width: 787px) {
+        text-align: center;
+    }
 `;
 
 const DetailsImg = styled.div`
     flex: 1;
     margin: 0px 10px;
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const UserList = styled.div`
@@ -120,6 +146,10 @@ const RoboDude = styled.img`
     max-width: 200px;
     margin: auto;
     display: block;
+
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const Wrap = styled.div`

comps/landing/index.js

@@ -6,13 +6,15 @@ import Button from '@material-ui/core/Button';
 import Fade from 'react-reveal/Fade';
 
 const MainContainer = styled.div`
-    @media (min-width: 768px) {
-        height: 94vh;
+        height: auto;
         min-height: 760px;
         background: rgb(32,9,6);
         background: linear-gradient(143deg, rgba(32,9,6,1) 0%, rgba(4,13,33,1) 35%, rgba(55,7,36,1) 100%);
         border-radius: 0 0 40% 0%;
-    }
+
+        @media screen and (max-width: 787px) {
+            border-radius: 0;
+        }
 `;
 
 
@@ -29,11 +31,21 @@ const Hero = styled.div`
     padding: 0px 1em;
     position: relative;
     display: flex;
+    
+    @media screen and (max-width: 787px) {
+        flex-direction: column-reverse;
+        padding: 50px 1em;
+    }
 `;
 
 const HeroMKTG = styled.div`
     width: auto;
     padding-bottom: 35px;
+
+    @media screen and (max-width: 787px) {
+        text-align: center;
+    }
+
 `;
 
 const Heading = styled.h1`
@@ -58,6 +70,10 @@ const CurrentQueue = styled.p`
     display: flex;
     justify-content: space-between;
     width: 90%;
+
+    @media screen and (max-width: 787px) {
+        width: 100%;
+    }
 `;
 
 const Sahil = styled.img`
@@ -74,6 +90,14 @@ const ImageWrapper = styled.div`
     flex: 1;
 `;
 
+const ButtonWrap = styled.div`
+    @media screen and (max-width: 787px) {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+`;
+
 
 
 const Landing = () => {
@@ -87,10 +111,12 @@ const Landing = () => {
                         <Heading><span>Hi, I'm Sahil!</span> Your Frontend Developer & Designer</Heading>
                         <SubHeading>Welcome to my development world! <span style={{color: "#ffffff"}}>I'm a Frontend Developer/Designer</span> & an Aspiring Fullstack Developer from British Columbia, Canada.</SubHeading>
                         <CurrentQueue>
+                            <ButtonWrap>
+                                <Button size={"large"} variant="contained" color="primary">
+                                Get in Touch!
+                                </Button>
+                            </ButtonWrap>
 
-                            <Button size={"large"} variant="contained" color="primary">
-                            Get in Touch!
-                            </Button>
                         </CurrentQueue>
                     </HeroMKTG>
                     <ImageWrapper>

pages/portfolio.js

@@ -89,6 +89,9 @@ const ElephantPhone = styled.img`
     width: auto;
     max-width: ${props=>props.width ? "250px" : "300px"};
     border-radius: 20px;
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const ElephantOpen = styled.div`
@@ -115,6 +118,7 @@ const ElephantPhoneOpen = styled.img`
     max-width: 370px;
     margin: auto;
     margin-bottom: 2em;
+    
 `;
 
 const ElephantTitleOpen = styled.p`
@@ -135,7 +139,7 @@ const ElephantSubTitleOpen = styled.p`
 
 const MyRole = styled.div`
     width: 100%;
-    padding: 100px 0px;
+    padding: 100px 15px;
 `;
 
 const MyRoleTitle = styled.p`
@@ -156,6 +160,9 @@ const Screenshot = styled.img`
     max-width: ${props=>props.width ? "300px" : "400px"};
     margin: 0px 40px;
     border-radius: 20px;
+    @media screen and (max-width: 787px) {
+        display: none;
+    }
 `;
 
 const Link = styled.a`