Can't get my grid responsive

[pmarxbraun]

Expected behaviour

I can't get my grid responsive on mobile. I don't know what I'm doing wrong. Any help would be appreciated :-)

Actual behaviour

Link

Operating system

GatsbyJS

Code

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Gallery from "react-grid-gallery"

import imageGalleryStyles from "./imagegallery.module.css"
import Button from "../Button/Button"
import TwoCol from "../Layout/TwoCol"

const BardageImageGallery = props => {
  const data = useStaticQuery(graphql`
    {
      forum: file(name: { eq: "entree-forum-histoire-contemporaine" }) {
        ...galleryImgs
      }
      patriarches: file(name: { eq: "rue-des-patriarches-bardage" }) {
        ...galleryImgs
      }
      chareton: file(name: { eq: "chareton_3" }) {
        ...galleryImgs
      }
      charenton_2: file(name: { eq: "Charenton-FClad-Panneau-de-bardage-01" }) {
        ...galleryImgs
      }
      estp_cachan: file(name: { eq: "ESTP-Cachan" }) {
        ...galleryImgs
      }
      eaux_vives: file(name: { eq: "Eaux-Vives-Geneve" }) {
        ...galleryImgs
      }
      chaperon: file(name: { eq: "cite-du-Chaperon-Vert-Gentilly" }) {
        ...galleryImgs
      }
      marchal: file(name: { eq: "FClad-rue-du-capitaine-marchal-Paris" }) {
        ...galleryImgs
      }
      fclad1: file(name: { eq: "fclad1" }) {
        ...galleryImgs
      }
      fclad2: file(name: { eq: "fclad2" }) {
        ...galleryImgs
      }
      fclad3: file(name: { eq: "fclad3" }) {
        ...galleryImgs
      }
      fclad4: file(name: { eq: "fclad4" }) {
        ...galleryImgs
      }
      fclad5: file(name: { eq: "fclad5" }) {
        ...galleryImgs
      }
      fclad6: file(name: { eq: "ESTP-final" }) {
        ...galleryImgs
      }
      logements: file(name: { eq: "Logements - Paris" }) {
        ...galleryImgs
      }
      logementsprive: file(name: { eq: "Logement prive" }) {
        ...galleryImgs
      }
      IFPS: file(name: { eq: "IFPS - Saint Martin Heres" }) {
        ...galleryImgs
      }
      citechaperon: file(name: { eq: "Cite Chaperon Vert - Gentilly" }) {
        ...galleryImgs
      }
    }
  `)

  const strings = {
    fr: {
      title: "quelques réalisations avec le panneau de bardage FClad®",
      btnstrings: "toutes nos réalisations",
      btnurl: "/realisations",
    },
    de: {
      title: "Unsere Referenzen mit Fassadenplatten FClad®",
      btnstrings: "ALLE UNSERE ERFOLGE",
      btnurl: "/unsere-referenzen",
    },
    en: {
      title: "Examples of constructions featuring the FEHR cladding panel",
      btnstrings: "all our achievements",
      btnurl: "/en/achievements",
    },
  }

  let IMAGES = []
  for (const img in data) {
    IMAGES.push({
      src: data[img].publicURL,
      thumbnail: data[img].childImageSharp.resize.src,
      thumbnailHeight: 320,
      thumbnailWidth: 320,
      caption: data[img].childImageSharp.fields.exif.raw.image.ImageDescription,
      alt: data[img].childImageSharp.fields.exif.raw.image.ImageDescription,
    })
  }

  return (
    <div className={imageGalleryStyles.section}>
      <TwoCol>
        <div className={imageGalleryStyles.container}>
          <h2>{strings[props.lang].title}</h2>
          <Button
            buttonString={strings[props.lang].btnstrings}
            buttonURL={strings[props.lang].btnurl}
          ></Button>
        </div>
      </TwoCol>
      <Gallery rowHeight={320} enableImageSelection={false} images={IMAGES} />
    </div>
  )
}

export default BardageImageGallery

[itoldya]

Hello @pmarxbraun! Thank you for creating an issue.

Sorry for the very late response.

It looks like your link is already expired. If it's still actual for you, please reopen the issue and provide a minimal, reproducible example.