I’ve expanded the boxes to take the entire width, to simplify the UX.
But what I struggle with is to align headings and descriptions to the left.
Which selector is responsible for the text alignment?
’AI-generated summary
A discussion on styling category boxes on a Discourse site is taking place. ludwikc is trying to align headings and descriptions to the left but is struggling to identify the responsible selector.
Moin suggests using the browser’s inspect tool to find the selectors and provides an example of how to do so. They discover that the CSS code category-boxes h3 { text-align: center; } is responsible for the current center alignment.
ludwikc explains that they have already tried to overwrite this code but are experiencing issues with another element blocking the changes.
Lilly provides a solution by adding the code .category-boxes .description, .category-boxes h3 { text-align: left; } to the theme’s common CSS, which successfully aligns the text to the left.
So… no one?
Did you try to find out yourself?
Making custom CSS changes on your site explains how you can find selectors by using your browsers inspect tool.
For example using “inspect” at the name of the category already takes you to
When you click the triangle, you can see
Looks like
.category-boxes h3 {
text-align: center;
}
is the css you want to overwrite.
You can find the description right below
Of course I did.
The thing is there’s something blocking it.
text-align: left !important brings no visible results.
When I try
text-align: center; text-indent: -100px; it moves the text as expected.
That’s where I’m stuck.
