Archived topic
How to Left-Align All Headings
19 replies · Started by Mihail on January 17, 2022
Hello,
I want to left-align headings H2, H3, H4, H5, and H6. I can left align manually, going from post to post, however it will take a lot of time.
I've tried a CSS you mentioned on : https://generatepress.com/forums/topic/css-for-centering-all-header-tags/ , but I changed center, to left, so it looks like this:
h2, h3, h4, h5, h6 {
text-align: left;
}
However, it doesn't seem to left-align the headings in my articles.
How should I proceed?
Any help will be appreciated.
Hi there,
all headings should be left aligned by default.
Can you share a link to a page where i can see them ?
Hello David,
Thanks for the quick reply!
Here's an example page : https://pectusexcavatumfix.com/pectus-excavatum-exercises
You can see how some headings are center-aligned.
Thank you!
Aah those headings have inline styles - so you gonna need to use some !important in your CSS:
h2, h3, h4, h5, h6 {
text-align: left !important;
}Thank you David, everything works well now!
Glad to hear that!
Hello David!
I am sorry to inform you but the changes didn't affect the headings on mobile. Some of them are still center-aligned.
The headings are successfully left-aligned only on desktop.
What may cause the issue?
Thank you in advance!
Your current code is wrapped in a desktop only media query:
https://www.screencast.com/t/BMDJdBg00aWB
Maybe it's missing a close bracket } somewhere above.
Thank you for the reply Leo.
I am really sorry, but I am not quite familiar with editing CSS. I am afraid I might mess something up.
If you don't mind, I provided temporary credentials for my website, as I find it more comfortable for you to check whether there is a missing closing bracket } that needs to be added.
Any help will be appreciated.
Try adding a closing bracket } at line 28 to close off the @media (min-width: 769px) { at line 1:
https://www.screencast.com/t/3H8NkRTg
Thank you, David and Leo! This is amazing. Everything works well now!
Many thanks!
No problem :)
Hello,
I am sorry, but even though I added a closing bracket at line 28, the headings aren't left-aligned on mobile once again. I haven't changed anything in the Additional CSS since adding the closing bracket there.
Here is a screenshot of the Additional CSS window: https://imgur.com/jq9nn4B
What may cause the issue?
Thanks in advance!
Mihail.
Couple of other errors
1. Remove this extra bracket:
https://www.screencast.com/t/QQNeKIfkG9
2. Insert a Bracket here - so the @media query above is closed off:
Thanks for the quick reply!
I tried the suggestions above, however, the headings are still centered and not left-aligned on mobile.
Here are images of the Additional CSS: https://imgur.com/a/W0qIzZD
What should I do next?
Thanks
