Widget footer centered

[stekats]

Hello I would like to make the widgets in my footer centered but the text inside the widgets i would like it to be with left orientation.
how do I do it with css?

[ruenel]

Hello Stella,

Thanks for writing in! Do you want to display the footer widgets like this?

Kindly remove your custom CSS with text-align: center; first. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based on the screenshot above, the footer has a class x-colophon and top. The widgets were displayed in columns contained with an element that is using x-container, max and width. Therefore, you will have this CSS code:

.x-colophon.top .x-container.max.width {
    max-width: 600px;
}

The max-width: 600px; sets the maximum width of the container wide enough to display the widgets and its contents while the whole container is displayed at the center.

Please note that the code above serves as an example code and will be a good starting point for your modifications. Custom coding is beyond the scope of our support. Any custom CSS added to your site will require that you will have to maintain and check the code whenever there are theme and plugin updates. If you are interested you can learn more about CSS selectors and details here.

Best Regards.

[stekats]

Yes I want it to look exactly like your picture!
I have put the css code but it doesn’t replicate like yours.
I have put max-width: 800px;
it doesn’t seem to be centered

[prakash_s]

Hi Stella,

Add this custom CSS code in X->Theme options -> CSS to make the contents aligned centre.

footer.x-colophon.top .x-column.x-1-3 {
    width: 33.3%;
    margin-right: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[stekats]

Thank you, that worked perfectly!
And one more thing at the about page the footer fonts are bolded how can i make them regular like the other pages?

[prakash_s]

Hello Stella,

I checked the footer of the “Home” page and “About” page. On the About page Footer, if you see the make of the Footer the is an extra bold tag("b") is rendering in the Footer because of that all the fonts are getting bold. You need to remove the bold tag("b") from the footer to get rid.

Homepage Footer Markup

Thanks

[stekats]

But how do I remove this bold tag ?
where do I go?

[prakash_s]

Hello Stella,

There might be a few different reasons for this issue, I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1. Testing for Plugin Conflict
2. CSS/JS Customization
3. Version Compatibility
4. Disabling Cache

If none of those work, please send your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[stekats]

I can not find the problem I have attached a secure note

[ruenel]

Hello Stella,

The issue in your About page is because you have inserted an invalid HTML in the content area element. You have added this:

[content_band style="color: #fff;" bg_image="https://aquantum.gr/wp-content/uploads/2018/05/daylight-environment-forest-459225-1.jpg" parallax="true" border="all" inner_container="true"] 
[custom_headline style="margin-top: 30; color: #fff;" level="h4" looks_like="h3"][/custom_headline] 
<p><b></p> [/content_band]

I went ahead and corrected your issue already. I have updated the code into using this instead:

[content_band style="color: #fff;" bg_image="https://aquantum.gr/wp-content/uploads/2018/05/daylight-environment-forest-459225-1.jpg" parallax="true" border="all" inner_container="true"] 
[custom_headline style="margin-top: 30; color: #fff;" level="h4" looks_like="h3"][/custom_headline] 
<p></p> [/content_band]

Kindly check your page now.

[stekats]

You are the best, thank you!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.