fix: mobile overlap issue

mmwoods · Dec 28, 2019 · 64e011a · 64e011a
1 parent e6dcee4
commit 64e011a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/components/home/introduction/introduction.module.css b/src/components/home/introduction/introduction.module.css
@@ -4,17 +4,17 @@
 }
 
 .background {
-  margin-top: 30px;
+  margin-top: 100px;
   background: #f3f5f7;
 }
 
 .imageWrapper {
-  display: flex;
-  justify-content: center;
+  text-align: center;
   padding: 15px;
 }
 
 .image {
+  margin-top: -75px;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem;
 }
 

diff --git a/src/components/home/title/title.module.css b/src/components/home/title/title.module.css
@@ -6,7 +6,7 @@
 }
 
 .container {
-  margin-top: 125px;
+  margin-top: 50px;
   text-align: right;
 }
 
@@ -22,3 +22,9 @@
   font-weight: 400;
   text-transform: uppercase;
 }
+
+@media (min-width: 600px) {
+  .container {
+    margin-top: 125px;
+  }
+}
diff --git a/src/components/home/title/title.tsx b/src/components/home/title/title.tsx
@@ -5,8 +5,8 @@ import css from "./title.module.css";
 export const Title = () => (
   <div className={css.wrapper}>
     <div className={css.container}>
-      <h1 className={css.title}>Projects I have been working on</h1>
-      <p className={css.subtitle}>Currently focusing on Serverless/DynamoDB</p>
+      <h1 className={css.title}>Projects Ongoing</h1>
+      <p className={css.subtitle}>Currently focusing on Serverless</p>
     </div>
   </div>
 );