[Resolved] How to Left-Align All Headings

[Mihail]

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.

[David]

Hi there,

all headings should be left aligned by default.
Can you share a link to a page where i can see them ?

[Mihail]

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!

[David]

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;
}

[Mihail]

Thank you David, everything works well now!

[David]

Glad to hear that!

[Mihail]

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!

[Leo]

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.

[Mihail]

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.

[Leo]

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

[Mihail]

Thank you, David and Leo! This is amazing. Everything works well now!

Many thanks!

[Leo]

No problem 🙂

[Mihail]

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.

[David]

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:

https://www.screencast.com/t/EiaPzw6hjfm

[Mihail]

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

[Author]

Posts