Merge pull request #76 from diekus/pwastore-masonry

Fixes layout in mobile

Author: diekus

pwa-pwastore/index.html

@@ -35,7 +35,7 @@ <h2>Instructions</h2>
             <ul>
                 <li>Check if you need to enable any experimental features in <code>about://flags</code>.</li>
                 <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials" target="_blank">List of active Origin Trials on Microsoft Edge.</a></li>
-                <li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos.</li>
+                <li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos and the <a href="https://developer.chrome.com/blog/masonry" target="_blank">Masonry layout</a> to arrange items.</li>
             </ul>
         </article>
 

pwa-pwastore/styles/pwastore.css

@@ -95,8 +95,9 @@ a {
 
 code {
     font-family: monospace;
-    margin: 0.15rem;
-    background-color: #FEFEFE22;
+    margin: 0.2rem;
+    background-color: #FEFEFE55;
+    border-radius: 5px;
 }
 
 
@@ -224,7 +225,7 @@ footer {
 @media only screen and (max-width: 600px) {
     main {
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        grid-template-rows:  repeat(auto-fill, 275px);    
+        grid-template-rows:  repeat(auto-fill, auto);    
     }
 
     header {
@@ -242,7 +243,7 @@ footer {
 @media only screen and (max-width: 350px) {
     main {
         grid-template-columns: repeat(auto-fill, 100%);
-        grid-template-rows:  repeat(auto-fill, 275px);    
+        grid-template-rows:  repeat(auto-fill, auto);    
     }
 }