Site URL: https://www.nativeland.org/circle-of-kin
I am trying to create a mobile-friendly team bio page in which all photos are displayed in a grid without titles but not detailed bio text, and where users can select bio images to view all the individual bio text.
Here's the page: https://www.nativeland.org/circle-of-kin
I'm using Bryant and 7.0, with a Gallery Page that has been inserted on this page using a Summary Block.
Currently, on a desktop browser you can click on the photo and on hover get the text overlaid on the photos. That's fine, though I'd prefer the text not be overlaid over the photo. On tablet or mobile, however, there is only a tiny dot in the bottom right corner you can select to reveal the hover text, and it's so small most users won't ever find it and rather see a huge photo gallery.
Also, when you are on the bio page if you select the title you go into the gallery page, which I don't want.
Ideally, selecting the image and the title would go to the same place: a lightbox-type environment in which the photo appears larger and centered but not full-screen (as is currently the case), and where the text automatically appears below no matter what, with or without hover.
Any suggestions would be much appreciated. Thanks!