made more responsive

gwenfriedman · Feb 29, 2020 · 6a9de8b · 6a9de8b
1 parent eb8ecf1
commit 6a9de8b
Show file tree

Hide file tree

Showing 7 changed files with 340 additions and 545 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import './App.css';
 import Home from './Components/Home.js';
-import Home2 from './Components/Home2.js';
 import Navigation from './Components/Nav.js';
 import Hashbrowwn from './Components/InfoPages/Hashbrowwn';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -15,7 +14,7 @@ function App() {
                 <Navigation/>
                 <div>
                     <Route exact path='/'
-                           component={Home2}/>
+                           component={Home}/>
                 </div>
                 <div>
                     <Route exact path='/hashbrowwn'

diff --git a/src/Components/Home.css b/src/Components/Home.css
@@ -5,6 +5,13 @@
     --custom-grey: #45434B;
 }
 
+@media (max-width: 990px) {
+    /* CSS that should be displayed if width is equal to or less than 800px goes here */
+    .section-title {
+        margin-left:10% !important;
+    }
+}
+
 .rect {
     width:500px;
     height:430px;
@@ -13,14 +20,6 @@
     z-index: -1;
 }
 
-/*.rect-mobile {*/
-/*    width:500px;*/
-/*    height:430px;*/
-/*    border:2px solid var(--custom-grey);*/
-/*    z-index: -1;*/
-/*    margin-top: -50px;*/
-/*}*/
-
 .description {
     font-size: 25px;
     color: var(--custom-grey);
@@ -38,28 +37,10 @@
     margin-left: 200px;
 }
 
-/*.text-field-mobile {*/
-/*    margin-top: 90px;*/
-/*    margin-left: 20px;*/
-/*}*/
-
 .project-text-field {
     margin-left: 200px;
 }
 
-/*.image {*/
-/*    width: 100%;*/
-/*    max-width: 500px;*/
-/*    max-height: 375px;*/
-/*    height: auto;*/
-/*}*/
-
-/*.image-mobile {*/
-/*    width: 70%;*/
-/*    max-height: 375px;*/
-/*    height: auto;*/
-/*}*/
-
 .rect-orange {
     background-color: var(--custom-orange);
     color: white;
@@ -87,15 +68,9 @@ i {
 .section-title {
     font-size: 40px;
     color: var(--custom-orange);
-    margin-left:130px;
+    margin-left:85px;
 }
 
-/*.section-title-mobile {*/
-/*    font-size: 40px;*/
-/*    color: var(--custom-orange);*/
-/*    margin-left:20px;*/
-/*}*/
-
 .project-pic {
     height: auto;
     width: auto
@@ -136,11 +111,16 @@ i {
     z-index: -1;
 }
 
+.card-desktop-project-list {
+    margin-left: -200px;
+    height: 350px;
+    z-index: -1;
+}
+
 .card-mobile {
     height: 400px;
     margin-top: -75px;
     z-index: -1;
-    background-color: yellow;
 }
 
 .card-body-desktop {
@@ -154,4 +134,22 @@ i {
     width: 300px;
     text-align: center;
     margin-top: 75px;
+}
+
+#image-project-header {
+    clip: rect(3px 3px 3px 3px);
+}
+
+.Home {
+    margin-top: 125px;
+}
+
+.card-title-mobile {
+    margin-top: 75px;
+}
+
+.card-project-list-mobile {
+    height: 300px;
+    margin-top: -75px;
+    z-index: -1;
 }