Make WeaponGrid responsive

components/ExtraWeapons/index.scss

@@ -1,4 +1,4 @@
-#ExtraWeapons {
+#ExtraGrid {
     background: #ECEBFF;
     border-radius: 8px;
     box-sizing: border-box;
@@ -10,16 +10,31 @@
     position: relative;
     left: 8px;
 
+    @media (max-width: $medium-screen) {
+        left: auto;
+        max-width: auto;
+        width: 100%;
+    }
+
     & > span {
         color: #4F3C79;
         display: flex;
         align-items: center;
+        flex-grow: 1;
         justify-content: center;
         line-height: 1.2;
         font-weight: 500;
         margin-right: 16px;
         text-align: center;
-        width: 206px;
+    }
+
+    .grid_weapons {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin: 0;
+        padding: 0;
+        max-width: 528px;
     }
 
     .WeaponUnit .WeaponImage {

components/ExtraWeapons/index.tsx

@@ -25,9 +25,9 @@ const ExtraWeapons = (props: Props) => {
     const numWeapons: number = 3
 
     return (
-        <div id="ExtraWeapons">
+        <div id="ExtraGrid">
             <span>Additional<br />Weapons</span>
-            <ul id="grid_weapons">
+            <ul className="grid_weapons">
                 {
                     Array.from(Array(numWeapons)).map((x, i) => {
                         return (

components/WeaponGrid/index.scss

@@ -1,31 +1,42 @@
-#WeaponGrid {
+#MainGrid {
     display: flex;
     justify-content: center;
+
+    @media (max-width: $medium-screen) {
+        
+    }
+    
+    .grid_weapons {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        margin: 0;
+        padding: 0;
+        max-width: 528px;
+    }
+}
+
+#MainGrid, #ExtraGrid {    
+    .grid_weapons > * {
+        margin-bottom: $unit * 3;
+        margin-right: $unit * 3;
+        
+        @media (max-width: $medium-screen) {
+            margin-bottom: $unit * 2;
+            margin-right: $unit * 2;
+        }
+    }
+    
+    .grid_weapons > *:nth-child(3n+3) {
+        margin-right: 0;
+    }
+    
+    .grid_weapons > li {
+        list-style: none;
+    }
 }
 
 #ExtraWeapons #grid_weapons > * {
     margin-bottom: 0;
 }
 
-#grid_weapons {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    width: 528px;
-}
-
-#grid_weapons > * {
-    margin-bottom: 24px;
-    margin-right: 24px;
-
-}
-
-#grid_weapons > *:nth-child(3n+3) {
-    margin-right: 0;
-}
-
-#grid_weapons > li {
-    list-style: none;
-}

components/WeaponGrid/index.tsx

@@ -238,10 +238,10 @@ const WeaponGrid = (props: Props) => {
     )
     
     return (
-        <div id="weapon_grids">
+        <div id="WeaponGrid">
-            <div id="WeaponGrid">
+            <div id="MainGrid">
                 { mainhandElement }
-                <ul id="grid_weapons">{ weaponGridElement }</ul>
+                <ul className="grid_weapons">{ weaponGridElement }</ul>
             </div>
 
             { (() => { return (props.extra) ? extraGridElement : '' })() }

components/WeaponUnit/index.scss

@@ -2,91 +2,103 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-}
 
-.WeaponUnit .WeaponImage {
+    &.mainhand {
-    background: white;
+        margin-right: $unit * 3;
-    border: 1px solid rgba(0, 0, 0, 0);
+        max-width: 200px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 2px;
-    overflow: hidden;
-    transition: all 0.18s ease-in-out;
-}
 
-.WeaponUnit.editable .WeaponImage:hover {
+        @media (max-width: $medium-screen) {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+            margin-right: $unit * 2;
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        }
-    cursor: pointer;
-    transform: $scale-wide;
-}
 
-.WeaponUnit.mainhand.editable .WeaponImage:hover {
+        &.editable .WeaponImage:hover {
-    transform: $scale-tall;
+            transform: $scale-tall;
-}
+        }
 
-.WeaponUnit.filled h3 {
+        .WeaponImage {
-    display: block;
+            aspect-ratio: 200 / 418;
-}
+            width: 200px;
+            height: auto;
+        
+            @media (max-width: $medium-screen) {
+                width: 25vw;
+            }
+        }
+    }
 
-.WeaponUnit.filled ul {
+    &.grid {
-    display: flex;
+        max-width: 160px;
-}
 
-.WeaponUnit h3,
+        .WeaponImage {
-.WeaponUnit ul {
+            aspect-ratio: 160 / 92;
-    display: none;
+            list-style-type: none;
-}
+            width: 160px;
+            height: auto;
+        
+            @media (max-width: $medium-screen) {
+                width: 20vw;
+            }
+        }
+    }
 
-.WeaponUnit h3 {
+    &.filled h3 {
-    color: #333;
+        display: block;
-    font-size: $font-regular;
+    }    
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-}
 
-.WeaponUnit img {
+    &.filled ul {
-    position: relative;
+        display: flex;
-    width: 100%;
+    }
-    z-index: 2;
-}
 
-.WeaponImage .icon {
+    & h3,
-    position: absolute;
+    & ul {
-    height: 20px;
+        display: none;
-    width: 20px;
+    }
-    z-index: 1;
 
-    svg {
+    .WeaponImage {
-        fill: #c9c9c9;
+        background: white;
+        border: 1px solid rgba(0, 0, 0, 0);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 2px;
+        overflow: hidden;
+        transition: all 0.18s ease-in-out;
+
+        &:hover .icon {
+            color: #555;
+        }
+
+        &.editable .WeaponImage:hover {
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+            cursor: pointer;
+            transform: $scale-wide;
+        }
+
+        h3 {
+            color: #333;
+            font-size: $font-regular;
+            font-weight: 500;
+            margin: 0;
+            text-align: center;
+        }
+
+        img {
+            position: relative;
+            width: 100%;
+            z-index: 2;
+        }
+
+        .icon {
+            position: absolute;
+            height: 20px;
+            width: 20px;
+            z-index: 1;
+        
+            svg {
+                fill: #c9c9c9;
+            }
+        }
     }
 }
-
-.WeaponImage:hover .icon {
-    color: #555;
-}
-
-/* Mainhand */
-.WeaponUnit.mainhand {
-    margin-right: 24px;
-    max-width: 200px;
-}
-
-.WeaponUnit.mainhand .WeaponImage {
-    height: 418px;
-    width: 200px;
-}
-
-/* Grid */
-.WeaponUnit.grid {
-    max-width: 160px;
-}
-
-.WeaponUnit.grid .WeaponImage {
-    list-style-type: none;
-    height: 92px;
-    width: 160px;
-}

styles/globals.scss

@@ -41,3 +41,10 @@ h1 {
     margin-top: $unit * 3;
     min-width: 752px;
 
+    @media (max-width: $medium-screen) {
+        min-width: auto;
+        width: 100%;
+    }
+
+}
+