Align Thumbnails

[les61]

GrampsAIO64-5.1.2-1 Windows 10.

I would like to have the thumbnails in the website I create lined up.

As can be seen the second line does not start until after the 4th image on line 1 and the last image is higher than the others on line 3. I am using the Mainz Stylesheet. Any suggestions on how to fix the issue?

Thanks in advance.

[SNoiraud]

This is related to the description size.
I never found a solution for that for the moment.

[emyoulation]

The only reliable solution I’ve found in other programs was to do a crop & pad. So that all the descriptions would be of similar size.

Unfortunately, it looks like this application would need to pad the thumbnails too before that would work.

[SNoiraud]

This is a css problem.
Could you try the following:
In your web site in the directory css, you have a file named narrative-screen.css
under the 4 following lines

#indivgallery {
/* float container stretch, see www.quirksmode.org/css/clearing.html */
overflow: hidden;
}

can you add

#indivgallery a {
color: #7D5925;
text-decoration: none;
word-wrap: break-word;
width: 220px;
display: block;
}

Try to reload the page after that. Does it work for you ?
PS: This can take a while before it works. Sometimes, the css is in cache and not reloaded.

[StoltHD]

Can’t this be solved with a html table? and set the image size (tumbnails) for each cell to the same height ot width? and use the media name or file name as a text in each cell?

I think DAM tools do something like that…

[SNoiraud]

No the problem is worse.
At the beginning, we had these images in a table with rows and columns.
The problem was when you resize your browser or when you were on a mobile phone.

[les61]

Thanks for the information. I have decided to shorten the “title” so that they line up and use the Notes to add the additional information that was originally in the Title.

Thanks again.

[SNoiraud]

I finaly found one solution for that. I need to modify all css files.
It will be included in the next 5.2 release.

You can have a look HERE

click on the media triangle then resize the browser.

[Mark]

Thanks for that. It seems to work well. I look forward to being able to use it.