[Resolved] Text-Align Issues

[Tom]

Hi there,

I’m having some issues with text-align not matching in the editor with the frontend.

Gutenberg is saying that the heading is centrally aligned, all looks good in the editor. (Img below)

https://gyazo.com/fc23192be6cba66ed6fa2fbc74622f37

However when viewing the frontend site the headings are left-aligned? (Img below)

https://gyazo.com/2874d695d09f414c7c897367127deffc

Cleared cache etc. but nothing seems to resolve it.

Any help hugely appreciated. Thanks!

[Ying]

Hi Tom,

When I check, the headlines are aligned to the center, both logged in and logged out:
https://www.screencast.com/t/1UuDjECGLB

Can you try clearing your browser cache?

let me know!

[Tom]

Hi Ying,

The issue is on the about page here: https://fhryybkciv.wpdns.site/about/

The fact it works absolutely fine on other pages just makes it all the more confusing!

Thanks in advance for the help!

[David]

Hi there,

can you try selecting the block, from its toolbar select Duplicate.
Publish it – does the duplicate look correct ?

[Tom]

Hi there,

Duplicated the section and still the same issue.

Also copied the section from a page where it’s aligned correctly but still the same issue.

Just happening on this one page, very odd.

Any advice appreciated!

[David]

How weird, what happens if you convert that section to Regular Block ?

[Tom]

Converted it to a regular block and problem solved!

Strange one, any idea what might’ve caused it?

[David]

Originally the headline was getting its CSS from another block as it had the same CSS ID Class ( i assume the block had been copy and pasted at some time ). And it seems the reusable block wouldn’t let go of that ID.

But reusable blocks are weird and i don’t fully understand how they work lol

[Tom]

How weird, makes sense that the CSS ID classes were the issue, as I’d copied and pasted a few bits around when building it.

You and me both on reusable blocks haha! Good old Gutenberg…

Thanks for all your help!

[David]

You’re welcome

[Author]

Posts