Currently I’m using the TTG plug-in with Adobe Lightroom to build my web pages. I do also have Backlight 6 and will move to that once I learn it better, but currently I need my site up and one final fix. The plug-in gives me a nice grid of 9 using a desktop browser such as Safari or Firefox.
However, mobile with iOS, my nice grid of 9 becomes 2 rows of 4 thumbnails and then one hangs a single thumbnail on the last row. There should be 3 rows and 3 columns, not two rows of 4 and then 1.
Is there way I can modify a current CSS, or an HTML code for Mobile that I can add to overcome the grouping by resolution for one in favor of grouping by a 3X3 grid?
you’ll probably need to add some css to control the mobile layout inside a <style> tag. Put the styling after the <body> tag.
You’d need to edit the exported html file to add code (sounds like you’ve already done that though.
you could also create a custom css file and add the reference code to the bottom of the <head>
I’m currently using my iPad and the tools for probing your site are limited. I may have time tomorrow to get to my laptop but perhaps someone else will jump in.
It’s been a long time since I looked at that plugin. Is there any control for thumbnail width in the mobile layout?
If you look at the style.css file, at around line 843 begins a series of media queries that establish the grid cell widths in percentages based on the devices screen width, essentially determining how many cells (images) in a row.
I’d try creating a media query that will affect the max width of modern phones and placing that in a custom css file or edit the existing style.css.
A custom css file would be the easiest to maintain as it won’t be overwritten by a re export of the gallery (though the code calling that custom file would have to be added again).