Update quest style to support portrait view (#5422)

gitcoinco · Nov 6, 2019 · c231db3 · c231db3
1 parent d31397a
commit c231db3
Showing 1 changed file with 92 additions and 13 deletions.
diff --git a/app/assets/v2/css/quests.css b/app/assets/v2/css/quests.css
@@ -202,7 +202,7 @@
   z-index: 999;
 }
 .card_img{
-  height: 120px; 
+  height: 120px;
   width: 120px;
   margin: 0px auto;
   margin-bottom: 20px;
@@ -236,7 +236,7 @@
 #quests_logo{
   margin-top: 10px;
   margin-left: -30px;
-  max-width: 300px; 
+  max-width: 300px;
 }
 .character{
   text-align: center;
@@ -381,7 +381,7 @@ body.quest_battle p{
 }
 
 .prize{
-  margin-top:60px; 
+  margin-top:60px;
   margin-left: 20px;
   border-radius: 2px;
   padding: 10px;
@@ -410,12 +410,12 @@ body.quest_battle p{
 }
 #header.fail{
   color: #F9006C;
-  padding: 20px; 
+  padding: 20px;
   margin-top: 5% !important;
 }
 #header.success{
   color: #0fce7c;
-  padding: 20px; 
+  padding: 20px;
 }
 #desc{
   background-color:rgb(21,0,62, 0.8);
@@ -542,10 +542,10 @@ body.quest_battle .bottom_notification{
 .button.button_sm.off{
   color: #aaa;
 }
-#cta_button p{ 
+#cta_button p{
   margin-top: 20px;
   font-weight: normal;
-  color: white; 
+  color: white;
 }
 
 .cen{
@@ -603,7 +603,7 @@ body.quest_battle .bottom_notification{
 #protagonist .flair div{
   top: 35px;
 }
-#gameboard { 
+#gameboard {
   width: 100%;
   height: 95%;
 }
@@ -705,7 +705,7 @@ body.green.quest_battle{
   background-image: linear-gradient(90deg, #3CB371, #2E8B57);
   background-size: 100% !important;
 }
-#background { 
+#background {
   position: absolute;
   z-index: -999999;
   width: 100%;
@@ -903,7 +903,7 @@ body.green #desc li.selected {
   background-color: black;
 }
 .refer_friend .top_img{
-  max-width: 200px; 
+  max-width: 200px;
   margin-top: -170px;
 }
 
@@ -999,7 +999,7 @@ body.green .tl{
     position: absolute;
     bottom: 20px;
     left: 20px;
-  }  
+  }
   #cta_button{
     margin-top: 20%;
   }
@@ -1127,7 +1127,7 @@ body.green .tl{
   }
   .demo{
     max-width: 300px;
-  }  
+  }
   .back_gradient {
     background-size: 100% 400px !important;
   }
@@ -1180,7 +1180,7 @@ body.green .tl{
   }
   .demo{
     max-width: 500px;
-  }  
+  }
   .row.indent_on_mobile{
     margin-left: 5%;
   }
@@ -1243,3 +1243,82 @@ body.green .tl{
   }
 }
 
+@media (max-height: 640px) {
+  .prize {
+    margin-top: 30px;
+    margin-left: 0;
+    height: 108px;
+  }
+
+  .prize img{
+    height: 70px;
+    width: 70px;
+    margin: 10px 36px;
+  }
+
+  #enemy.character img{
+    margin-top: 16px;
+    margin-right: 0;
+    width: 125px;
+    height: 125px;
+  }
+  #enemy.character .info{
+    margin-top: 9px;
+    top: 25px;
+  }
+  #enemy.character .flair {
+    position: fixed;
+    top: 70px;
+    left: 56px;
+  }
+  #header {
+    margin-top: -80px;
+    z-index: 999;
+    width: 80%;
+    left: 10%;
+  }
+
+  #desc{
+    margin-top: 0;
+    height: 200px;
+    z-index: 2;
+  }
+
+  #cta_button{
+    margin-top: 59%;
+    z-index: 3;
+  }
+
+  #cta_button p {
+    display: none;
+    margin-top: 6px;
+  }
+}
+
+
+@media (max-height: 560px) {
+  #enemy.character img{
+    margin-right: -124px;
+  }
+  #enemy.character .info{
+    left: -95px;
+  }
+
+  #header {
+    margin-top: -68px;
+  }
+
+  #desc{
+    margin-top: 30px;
+  }
+
+  #cta_button{
+    margin-top: 61%;
+    z-index: 1001;
+  }
+
+  #cta_button p {
+    display: none;
+  }
+}
+