Merge pull request #32 from discretize/bigger-character-image

feat: improve narrow-view character component image layout
discretize · May 12, 2024 · e712e74 · e712e74
2 parents 21d8eb1 + 861b145
commit e712e74
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/react-discretize-components/src/character/Character/Character.module.css b/react-discretize-components/src/character/Character/Character.module.css
@@ -19,19 +19,28 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  isolation: isolate;
 }
 .side {
   display: flex;
   flex: 0 0 250px;
   flex-direction: column;
   justify-content: space-between;
+  z-index: 1;
 }
 .middle {
   display: flex;
-  flex: 0.7 0.2 300px;
+  flex: 0.7 0.2;
   flex-direction: column;
   justify-content: space-between;
 }
+.middle > img {
+  width: max(100%, 450px);
+  left: 50%;
+  top: 33%;
+  position: relative;
+  transform: translate(-50%, -50%);
+}
 .skillsLegends {
   max-width: 390px;
 }