Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Hi, I have gone over various number of settings and I am unable to figure this out. I am creating a client response gallery with 4 thumbnail columns. I would also like to have 2 columns when viewed on a cellular phone. I have, to the best of my logic, setup the parameters in order for this to be true. Opening the gallery I see 4 columns, if I make the the browser window smaller, eventually they become 3 and afterwards 2 columns. But right before I get to the smallest browser window size possible, the columns become 5 and the thumbnails are too small. This is also true when accessing the gallery on a mobile phone on portrait mode.
This is the list of settings I have and this is the link to the gallery:
http://www.rafaelgamo.com/galleries/album4/
username: info@rafaelgamo.com
password: 12345
This gallery will disappear once it is up, so no worries about usernames or passwords.
Image Settings
thumbnail width 220
thumbnail height 220
Thumbnail Presentations
border 0px
border radius 0 px
Margin 20px
style classic
retina thumbnails on
Max Columns 4
Min Columns 2
width 220px
height 220px
centering method javascript
on mobile max columns 2
border off
scale image to fill off
Please let me know if you have any solution for this
Thanks!
Rafael
Offline
The gallery is working as designed. If you prefer fewer columns on mobile, then you might try using a custom stylesheet to change the rules. The relevant rules presently in play are:
@media only screen and (max-width: 548px) {
.the__gallery figure {
width: calc(50.000000% - 2px);
}
}
@media only screen and (max-width: 540px) {
.the__gallery figure {
width: calc(20% - 2px);
}
}
@media only screen and (max-width: 440px) {
.the__gallery figure {
width: calc(25% - 2px);
}
}
@media only screen and (max-width: 336px) {
.the__gallery figure {
width: calc(33.333333% - 2px);
}
}Offline
Thank you Matthew!
That was really helpful and now it is working smoothly! one last thing, I have the filenames (metadata) under each image. Is there a way to keep them in mobile? They disappear after getting to a certain size.
Thanks!
Rafael
Offline
because thumbnails are so small on mobile devices, metadata display on thumbnails is not displayed. You could try finding the corresponding media query and overriding it in your own custom css.
you can view the entire stylesheet by going to your site and viewing the source code (right-click> View Page
Source) and clicking on the link that looks something like this
<link rel="stylesheet" type="text/css" media="all" href="http://your-site.com/backlight/publisher/resource.php?template=6&extension=css&name=style" />Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
As Rod says. They're hidden entirely using CSS and media query rules, so the information is there; it just needs to be shown. You can override the CSS to do it. You'll just need to balance metadata display and thumbnail size.
Offline
Thank you very much! Now everything is working smoothly!
Offline