Fix gallery sizing on mobile

themes/red/assets/css/site.css

@@ -31,6 +31,10 @@
         height: 256px;
         width: auto;
     }
+
+    .grid-sizer, .grid-item {
+        width: 300px;
+    }
 }
 
 /* mobile devices */
@@ -65,6 +69,11 @@
         height: auto;
         width: 100%;
     }
+
+    .grid-sizer, .grid-item {
+        width: 100%;
+        height: auto;
+    }
 }
 
 body {
@@ -231,8 +240,6 @@ figure figcaption {
 }
 
 .grid-item {
-    height: auto;
-    width: 300px;
     margin-bottom: 10px;
     border: 1px inset black;
     border-radius: 3px;

themes/red/assets/js/site.js

@@ -1,8 +1,8 @@
 imagesLoaded(document.querySelector('.grid'), function(instance) {
     new Masonry('.grid', {
         itemSelector: '.grid-item',
-        columnWidth: 300,
+        columnWidth: '.grid-sizer',
         fitWidth: true,
-        gutter: 10
+        gutter: 10,
     });
 });

themes/red/layouts/_default/gallery.html

@@ -9,6 +9,8 @@
     {{ $art := (index site.Data ($.Param "json")) }}
 
     <div class="grid">
+    <div class="grid-sizer"></div>
+
     {{ range $art.categories }}
         {{ $should_include := false }}
 

themes/red/layouts/partials/art-gallery.html

@@ -1,6 +1,8 @@
 {{ $paginator := .Paginate (where .Pages "Type" "art") }}
 
 <div class="grid">
+<div class="grid-sizer"></div>
+
 {{ range $paginator.Pages }}
         {{ partial "render-art" . }}
 {{ end }}