X3Photo Gallery Forums

Dane wrote:i see, that the title is not perfect centered.

This is a really just a bit of a coincidence as the cards themselves have specific margin, which affects the text, but this margin is not identical to the space between the text and image. You would probably see this is more natural if you have descriptions and/or the text BELOW the image (which is more normal when using card layouts). In my opinion, one of the reasons to use "card" in the first place, is if you have descriptions, as it makes it easier to read.
https://demo.photo.gallery/examples/folders/columns/

You could use custom CSS:

Dane wrote:Another point in relation to Cards, in mobile mode it looks like this:

That's because under gallery grid settings, you have assigned fixed columns amount 3 instead of default 3,2,1 (3 for large screens, 2 for medium, 1 for small). Or instead use "Set Column width", which means columns would automatically break and depend on the screen size. Needless to say, if you just set static value 3, it won't look good on mobile, especially card style with captions.

Dane wrote:How can I place the cards under the image as in your example? 

If you scroll down to Captions, you should be able to see the order of items, where "preview" is the actual image. In your case, I guess you have [title][preview]. Change to [preview][title] and you can also add other caption elements of course.

I ran into the same problem a few years ago.  To solve this problem, I moved the titles to below the images.  That way, the tops & bottoms of the images all line up horizontally.  Some titles would still extend to 2 or more lines, but at least the images all line up, making the page look more pleasing (at least, in my opinion).

Just a thought.

I think your conclusions pretty much sum it up. Regardless of if you are using cards (or not), if you have longer texts on top of images, that may break into two lines, then the image itself is at risk of being pushed down. This is just a typical scenario for web design elements. Placing the text below the image is a typical simple solution.

In other scenarios, when you have extensive/unknown amounts of text per image in a layout, this is a reason why someone might select COLUMNS layout, allowing elements to grow vertically. Example below from Files Gallery, just to emphasize the logic:
https://demo.photo.gallery/examples/folders/columns/

Another solution that could be considered, would be to use CSS to "truncate" the text to a single line. This means that some of the text on some images will get cut off, to keep the text on a single line: "NGC456+NGC4631 - Die Walund Brech ...".