Footer Widget – Ocean WP Theme paragraph text not aligning centre

Hello @doublebrew,

I fully examined the issue you have raised on this topic and could not see it on my end. The alignment should be set on the P tag because you use a “paragraph” block.

You must set the alignment on the paragraph like this: https://postimg.cc/s1j9rr57, and you’ll see the correct style on the front, like this: https://postimg.cc/tY16qCJZ.

But on your website, I can’t see any alignment on the P tag or style on the wrapper: https://postimg.cc/PN0xMbfJ.

I hope it helps.
Best Regards

Hi Shahin

Thank you for the reply. I tried that as part of my initial setup on both the main appearance tab and the page widget. It is set to center align on both but still will not display correctly. I also don’t see any page code changes through the inspector either.

https://postimg.cc/K1dGDMDx

https://postimg.cc/NymgJjdT

Within the left panel customizer when I change the alignment I can see the text moving from left alignment to center, but that does not replicate on the page itself.

One thing I noticed is the footer widgets have a lock icon on them, I dismissed this through troubleshooting as the separator and image can be center-aligned perfectly ok on the single widget. Also, unsure if this is a feature that may only be available on the pro version.

Thanks again for any guidance.

Cheers, DB

Hello @doublebrew,

Perhaps some third-party plugins have conflicts with styling on your website, I can see the class now, to solve it, you can put the CSS below in Customizing > Custom CSS/JS > CSS Code:

#footer-widgets p.has-text-align-center {
    text-align: center;
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

I hope that helps.
Best Regards

Hi Shahin, that absolutely did the trick!! That piece of code worked perfectly in the customizer. Thank you for the information and guidance, very much appreciated!

Kind regards

Dave

You’re very welcome. Glad I could help.