Jump to content

Only one image clickable in Grid Masonry mobile

Recommended Posts

Posted

Site URL: https://gold-cheetah-exh9.squarespace.com/anders

Hi everyone! Could someone please help me out with this.

I used custom CSS to turn a masonry grid into 2 columns, instead of 1, on mobile view.
Now it seems that only one image is clickable, using lightbox, I think? How can i fix this?
When you hover over it with mobile view on pc (which of course you cant see on mobile itself) you can see that only the first image shows a loop to press it, the others don't.

https://gold-cheetah-exh9.squarespace.com/anders
PW: Geheim123

Weirdest thing is, if you go to a different type of photoshoot, for instance this link:
https://gold-cheetah-exh9.squarespace.com/familie-en-gezin-shoots (same password)
The gallery does work and I'm fairly sure that I used the same code for all of them.

Hopefully someone can help me with this!

  • Replies 4
  • Views 591
  • Created
  • Last Reply

Top Posters In This Topic

Posted
On 5/29/2022 at 5:31 AM, tuanphan said:

Hi,

Which code did you add? We can check easier

Hi! I used the code below, but did not write it myself. I took it from another post, but do not remember which one sorry!

@media (max-width: 767px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }

    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 3px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
          width: 100%!important;
    }
  
  .gallery-caption-content {
    opacity: 0.75 !important;
    height: 25%;
    position: relative;
    padding: 5px 10px 5px 10px;
    line-height: 15px !important;
}

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.