too big nav

src/static/css/all.css

@@ -127,17 +127,17 @@ pre,code {
     grid-row-gap: 0px; 
     background-color: transparent;
     width: 100vw;
-    /*min-width: 636px;*/
+    min-width: 636px;
 }
 .nav { 
     grid-area: 1 / 1 / 2 / 2;
     background-color: transparent;
-/*    width: 60vw;*/
+    width: 60vw;
     display: grid;
     grid-template-columns: 26% 51% 23%;
-    grid-template-rows: auto;
+    grid-template-rows: 1fr;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     margin: auto;
-/*    min-width: 636px;*/
+    min-width: 636px;
 }

src/static/css/nav.css

@@ -1,5 +1,10 @@
 /*set heart and star to 0px if viewport too small*/
 
+@media (max-width: 625px) {
+    .heart {
+    width: auto;
+    }
+}
 .heart { 
     grid-area: 1 / 1 / 2 / 2;
     background-color: transparent;
@@ -17,13 +22,11 @@
     background-size: contain;
     display: grid;
     grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
-    grid-template-rows: repeat(4, minmax(0px,auto));
+    grid-template-rows: repeat(4, auto);
     /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     align-items: center;
-    font-size: 2vw;
-    margin-bottom: 0px;
 }
 .star { 
     grid-area: 1 / 3 / 2 / 4;
@@ -37,42 +40,42 @@
 .nav-diary { 
     grid-area: 1 / 1 / 2 / 2;
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 100%;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    /*min-width: 48px;*/
+    min-width: 48px;
 }
 .nav-play { 
     grid-area:  1 / 2 / 2 / 3;
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 100%;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    /*min-width: 48px;*/
+    min-width: 48px;
 }
 .nav-about {
     grid-area: 1 / 3 / 2 / 4;
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 100%;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    /*min-width: 48px;*/
+    min-width: 48px;
 }
 .nav-dev {
     grid-area: 1 / 4 / 2 / 5;
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 100%;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    /*min-width: 48px;*/
+    min-width: 48px;
 }
 .navlink {
     font-size: 110%;
@@ -92,8 +95,7 @@
 }
 .nav-grid img {
     height: auto;
-    max-width:100%;
+    width: 100%;
-    max-height:100%;
 }
 .links { 
     grid-area: 2 / 1 / 3 / 2;