Adding and removing images from gallery based on devices viewed on

Please see the image attached.

- The section with images is a gallery block

- First text block is actually a jpg image.

- I would like gallery to display four images including the first text image when the page is viewed on anything that is 993px or higher

- Display six images, including the first text image, when it's viewed on anything that is 992px or lower.

Any help would be appreciated. Thanks.

This is possible, can you share your website URL?

Sure. It's www.amarjeet.net

password is cineabcxyz123

Bump*

Hoping this does what you want, add to your Custom CSS:

@media only screen and (max-width:992px) {
  .gallery-grid-item:nth-child(n+7) {
    display:none;
  }
}

Let me know if that works.

Thank you. This works perfectly for the cinematography page. However it does this to every page on the website. Is there a way to only apply this to "cinematography" page ?

Yes, you can add the page identifier before the previous code, like this:

#collection-601e9d14f944e970154cf0cf {
  @media only screen and (max-width:992px) {
    .gallery-grid-item:nth-child(n+7) {
      display:none;
    }
  }
}

Click the thumbs up if this worked for you, thanks! ↓↓↓

That's fantastic. Thank you so much for your help.