Vertical alignment of counter part in Extend family module

[TheDutchJewel]

In the Extended family module, the counter part before the name is aligned very high in the Rural theme compared to the default webtrees theme:

What is the best way to fix this: in the Rural theme or in the Extended family module?

[hartenthaler]

As far as I can see, this happens only in the compact design version of my module "extended family".

#hh_extended_family_content_compact .wt-chart-box-m,
#hh_extended_family_content_compact .wt-chart-box-f,
#hh_extended_family_content_compact .wt-chart-box-u {
    display: flex;
    align-items: center;
    clear: left;
    float: left;
    border-radius: 5px;
    margin: 2px 0;
    width: 99%;
}

#hh_extended_family_content .wt-chart-box-m,
#hh_extended_family_content .wt-chart-box-f,
#hh_extended_family_content .wt-chart-box-u {
    clear: left;
    float: left;
    border-radius: 5px;
    margin: 2px 0;
    width: 99%;

The difference are the two new inserted lines:

    display: flex;
    align-items: center;

[jon48]

As Hermann suggest, the "misalignment" is not actually specific to the Rural theme, and can be seen on other themes as well (the difference of font size may make it slightly less obvious on the others):

They are not actually not misaligned, the different text elements are just vertically aligned around their center line, and as the counter element is smaller (75% font size) than the name, its baseline is slightly above the one of the main text. If you prefer to have the text aligned , then the CSS would need to replace center by baseline for the align-items property:

align-items: baseline

[TheDutchJewel]

If you prefer to have the text aligned , then the CSS would need to replace centerby baselinefor the align-items property

That looks much better. I hope Hermann will fix this.

[hartenthaler]

Yes, this looks better. Is already fixed and tested, will be part of the next release! Thank you!