Work nicely in landscape or portrait mode

src/index.css

@@ -17,6 +17,20 @@ ol, ul {
   margin-bottom: 10px;
 }
 
+@media (orientation:landscape) {
+  .square {
+    height: 11vh;
+    width: 11vh;
+  }
+}
+
+@media (orientation:portrait) {
+  .square {
+    height: 11vw;
+    width: 11vw;
+  }
+}
+
 .square {
   background: #fff;
   border: 1px solid #999;
@@ -24,12 +38,10 @@ ol, ul {
   font-size: 24px;
   font-weight: bold;
   line-height: 30px;
-  height: 11vw;
   margin-right: -1px;
   margin-top: -1px;
   padding: 0;
   text-align: center;
-  width: 11vw;
 }
 
 .square:hover {

src/index.js

@@ -69,7 +69,7 @@ function isKing(piece) {
 function Square(props) {
   let bg = {
       backgroundImage: `url(${Images[props.value]})`,
-      backgroundSize: `11vw`,
+      backgroundSize: `100%`,
       backgroundColor: props.bg,
   };
   if (props.value != null) {