fixed responsive height

Author: carlosjorger

index.html

@@ -58,6 +58,7 @@ <h3 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer<
   <section>
     <article id="work">
       <h2 class="subtitle reveal">These are my github repositories</h2>
+     <div class="card-projects">
       <div id="open-ecommerce" class="card-project reveal">
         <div class="card-title">
           OpenEcommerce
@@ -74,26 +75,14 @@ <h2 class="subtitle reveal">These are my github repositories</h2>
         <div class="card-title">
           Angular Portfolio
         </div>
-        <br>
         <div class="card-description">
           It is a personal portfolio builded with angular using really cool animation (Angular animations).
         </div>
         <div class="card-links">
           <a class="icon-link" href="https://github.com/CarlosJorgeR/portfolio"><i class="fab fa-github fa-gl"></i></a>
         </div>
       </div>
-      <!-- <ul>
-        <li class="reveal">
-          <p><a class="work-link" href="https://github.com/CarlosJorgeR/openEcommerce" target="_blank"
-              rel="noopener noreferrer">
-              OpenEcommerce</a> is an ecommerce builded with .net.</p>
-        </li>
-        <li class="reveal">
-          <p><a class="work-link" href="https://github.com/CarlosJorgeR/portfolio" target="_blank"
-              rel="noopener noreferrer">
-              My portfolio</a> is a personal portfolio builded with angular.</p>
-        </li>
-      </ul> -->
+     </div>
     </article>
   </section>
   <footer>

styles.css

@@ -35,9 +35,9 @@ section {
   /* border: solid 3px aqua; */
   width: 60%;
   margin: 0 auto;
-  margin-top: 5em;
-  margin-bottom: 5em;
-  height: 25em;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  height: calc(100vh - 4em);
   z-index: 2;
 
 }
@@ -165,19 +165,22 @@ nav {
   padding: 0.5em;
   display: flex;
 }
+.card-projects{
+  display: flex;
+  flex-direction: column;
+}
 #open-ecommerce{
   border-right: groove 0.2rem aqua;
   border-top: groove 0.2rem aqua;
   border-bottom: groove 0.2rem aqua;
-
-  margin-left: 3em;
+  align-self:flex-end;
 }
 #angular-portfolio{
   border-left: groove 0.2rem aqua;
   border-top: groove 0.2rem aqua;
   border-bottom: groove 0.2rem aqua;
+  align-self:flex-start;
 
-  margin-right: 3em;
 }
 #angular-portfolio .card-links{
   justify-content: end;
@@ -332,17 +335,13 @@ nav {
     font-size: 20px;
 
   }
-  .card-project{
-    width: 70%;
-  }
   p {
     max-width: 450px;
   }
 
   section,
   footer {
     width: 75%;
-    height: 30em;
 
   }
 }
@@ -351,17 +350,13 @@ nav {
   :root {
     font-size: 15px;
   }
-  .card-project{
-    width: 80%;
-  }
   p {
     max-width: 330px;
   }
 
   section,
   footer {
     width: 80%;
-    height: 35em;
 
   }
 }
@@ -370,17 +365,30 @@ nav {
   :root {
     font-size: 17px;
   }
-  .card-project{
-    width: 85%;
-  }
   p {
     max-width: 85%;
   }
 
   section,
   footer {
     width: 83%;
-    height: 40em;
+  }
+
+  .br-show {
+    display: inline;
+  }
+}
+@media (max-width: 350px) {
+  :root {
+    font-size: 13px;
+  }
+  p {
+    max-width: 90%;
+  }
+
+  section,
+  footer {
+    width: 88%;
   }
 
   .br-show {