diff --git a/app/assets/v2/css/quests.css b/app/assets/v2/css/quests.css index 8a7044b374b..67d9b6c2037 100644 --- 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; + } +} +