trainer sprite alignment

1 files changed, 18 insertions, 4 deletions

diff --git a/resources/css/battle.css b/resources/css/battle.css
index 0052072..1e52802 100644
--- a/resources/css/battle.css
+++ b/resources/css/battle.css
@@ -69,12 +69,13 @@
 .battle__monster-visual {
   flex-grow: 1;
   flex-basis: 50%;
-  text-align: center;
+  position: relative;
 }
 
 .battle__monster-sprite {
-  margin-bottom: 0.25rem;
+  text-align: center;
 }
+
 .battle__monster-img {
   cursor: pointer;
   transition-property: filter;
@@ -90,11 +91,12 @@
   z-index: 10;
 }
 
-.battle__opponent__trainer-sprite {
+.battle__monster__trainer-sprite {
   position: absolute;
   top: 0;
   right: 0;
-  height: 120px;
+  width: 120px;
+  max-width: 25vw;
 }
 
 .battle__monster-technique {
@@ -120,6 +122,18 @@
   display: none;
 }
 
+@media (max-width: 600px) {
+  .battle__monster--has-trainer-sprite .battle__monster-sprite {
+    width: 30vw;
+  }
+}
+@media (max-width: 450px) {
+  .battle__monster--has-trainer-sprite .battle__monster-sprite {
+    width: auto;
+    text-align: left;
+  }
+}
+
 .battle__monster--player {
   flex-direction: row-reverse;
   align-items: flex-end;