From d657058df57212f696c21cf526cdacb579dc1aad Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 9 Jul 2022 17:04:55 -0700
Subject: [PATCH] add xs breakpoint

---
 src/components/MasonryGallery.js | 6 ++++--
 src/pages/photogallery.js        | 1 +
 tailwind.config.js               | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js
index 5a41144..f459911 100644
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -19,7 +19,7 @@ const MasonryGallery = ({
     [aspectTargetsByBreakpoint]
     );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "md");
+  const { breakpoint } = useBreakpoint(breakpoints, "sm");
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
@@ -87,6 +87,8 @@ const MasonryGallery = ({
 
   let cursor = 0;
   return (
+    <>
+    {/* {breakpoint} */}
     <div
       className="w-full flex items-center flex-wrap"
       style={{
@@ -158,8 +160,8 @@ const MasonryGallery = ({
         );
       })}
     </div>
+    </>
   );
-  // return null;
 };
 
 export default MasonryGallery;
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index 2a72fe1..f92be9b 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -148,6 +148,7 @@ const GalleryPage = ({ data }) => {
       </div>
       <MasonryGallery
         aspectsByBreakpoint={{
+          xs: 2,
           sm: 3,
           md: 4,
           lg: 4,
diff --git a/tailwind.config.js b/tailwind.config.js
index e196def..7863362 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
   // darkMode: 'media', // or 'media' or 'class'
   theme: {
     screens: {
+      xs: "10px",
       sm: "640px",
       md: "768px",
       lg: "1024px",