diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index 97fc45ad..f379266b 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -3,27 +3,36 @@
   flex-direction: column;
   justify-content: center;
   margin: auto;
-  max-width: 761px;
+  max-width: $grid-width;
 
   @include breakpoint(tablet) {
     align-items: center;
   }
 }
 
-#grid_characters {
+#Characters {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: $unit;
+  gap: $unit-3x;
   margin: 0;
   padding: 0;
-  max-width: 761px;
+  max-width: $grid-width;
   isolation: isolate;
 
   @include breakpoint(tablet) {
+    gap: $unit-2x;
     justify-content: space-between;
     width: 100%;
   }
 
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 500px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
+      gap: $unit;
+  }
+
   & > li:last-child {
     margin: 0;
   }
diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 916bc677..f74d6e0b 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -361,7 +361,7 @@ const CharacterGrid = (props: Props) => {
           resolveConflict={resolveConflict}
           resetConflict={resetConflict}
         />
-        <ul id="grid_characters">
+        <ul id="Characters">
           {Array.from(Array(numCharacters)).map((x, i) => {
             return (
               <li key={`grid_unit_${i}`}>