Page 1 of 1

Styles and Effects - Card

Posted: 01 Jan 2025, 15:50
by Dane
Hi,

i want to use the "Styles and Effects" -> "Card", and i see, that the title is not perfect centered. See here: https://www.linsenschuss.de/galerie/astrofotografie/

2025-01-01 21_48_39-Astrofotografie.png
2025-01-01 21_48_39-Astrofotografie.png (256.29 KiB) Viewed 2146 times
[/size][/color]

Can the title be placed more vertically in the center of the card? Currently the title is a little further down. 

Re: Styles and Effects - Card

Posted: 01 Jan 2025, 20:14
by Dane
Another point in relation to Cards, in mobile mode it looks like this:
Screenshot_20250102_014350_Chrome.jpg
Screenshot_20250102_014350_Chrome.jpg (462.83 KiB) Viewed 2144 times

Re: Styles and Effects - Card

Posted: 01 Jan 2025, 21:16
by mjau-mjau
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:
Code
.card .title {
  margin-bottom: 1rem;
}
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.

Re: Styles and Effects - Card

Posted: 02 Jan 2025, 01:36
by Dane
Thanks Karl, both hints have helped.

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

Re: Styles and Effects - Card

Posted: 02 Jan 2025, 01:50
by mjau-mjau
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.

Image

Re: Styles and Effects - Card

Posted: 02 Jan 2025, 02:47
by Dane
Thanks Karl, i will try that. But i think the title on top is better on my taste.

Re: Styles and Effects - Card

Posted: 20 Jan 2026, 03:26
by Dane
Hi Karl,

Regarding Styles and Effects - Card, I now have a new concern. Some of my articles have slightly longer names, which extend to two lines. 
2026-01-20 09_24_08-Posteingang - Dane.Vetter@sig.biz - Outlook.jpg
2026-01-20 09_24_08-Posteingang - Dane.Vetter@sig.biz - Outlook.jpg (212.43 KiB) Viewed 1099 times
Do you have any ideas on how to solve this efficiently? Perhaps simply make all the headlines as tall as two lines, and if there is only one line, display it centered?

Re: Styles and Effects - Card

Posted: 20 Jan 2026, 09:07
by JMM
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.

Re: Styles and Effects - Card

Posted: 20 Jan 2026, 14:09
by Dane
Hi!

Ok, i try it, like Karl explained it some posts above. Maybe this is a solution. Thanks! 

Re: Styles and Effects - Card

Posted: 20 Jan 2026, 21:25
by mjau-mjau
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 ...".

Re: Styles and Effects - Card

Posted: 21 Jan 2026, 02:34
by Dane
Hi Karl,

thanks for the explanation.

I changed it as suggested by JMM

See here: https://www.linsenschuss.de/galerie/astrofotografie/