Title text alignment in on category cards with category groups plugin

Product Support

AI-generated summary

In a support discussion about the ‘category groups’ plugin, jordan-violet reports that while adding align-self: center; to .category-box-heading successfully centers single-line category titles, it fails to center titles that wrap to two lines. Despite inspecting with browser dev tools, no CSS fix was apparent. Canapin suggests an alternative CSS rule: .category-details .parent-box -link h3 { text-align: center; }, which may resolve the issue. tobiaseigen later checks in to ask whether jordan-violet confirmed if Canapin’s solution worked or found another fix. The issue remains unresolved in the thread, with no follow-up from the original poster.

1

This plugin is great, but there seem to be some nuances. Enabling the plugin gives us this out of the box:

The image features the logos of "1Secure" and "Auditor," with a dropdown menu labeled "Products." (Captioned by AI)
The image features the logos of "1Secure" and "Auditor," with a dropdown menu labeled "Products." (Captioned by AI)983×294 7.92 KB

Simple enough, we add this css:

.category-box-heading {
    align-self: center;
}

and it’s all good:

The image shows a drop-down menu with two options, "1Secure" and "Auditor," each accompanied by a distinct logo. (Captioned by AI)
The image shows a drop-down menu with two options, "1Secure" and "Auditor," each accompanied by a distinct logo. (Captioned by AI)994×300 8.12 KB

EXCEPT, when the title has two lines. For some reason, nothing I do seems to move it to center:

The image displays a logo composed of four blue squares connected by lines, forming a spherical shape with a red square, and the text "GroupID Password Management" on a dark background. (Captioned by AI)
The image displays a logo composed of four blue squares connected by lines, forming a spherical shape with a red square, and the text "GroupID Password Management" on a dark background. (Captioned by AI)481×274 6.87 KB

I can’t seem to see what would prevent two-line category titles from moving center and even using the browser dev tools, I couldn’t figure out how to force it to center.

2

Try this instead:

.category-details .parent-box-link h3 {
    text-align: center;
}

:slight_smile:

3

@jordan-violet do you recall if Canapin’s suggestion worked, or if you were able to otherwise solve this issue?