[Resolved] Social media icons in the center of the footer

[Matthieu]

Hello, do you know how I could put social media icons in the center of the footer?
(I use the Lightweitght Socials Icons extension)

Thanks 😁

[Elvin]

Hi,

Try this CSS code:

.inside-site-info.grid-container {
    position: relative;
}
.footer-bar {
    position: absolute;
}

A wise man once said:
"Have you cleared your cache?"

[Matthieu]

It doesn’t work as expected, it has centered the icons and the text. 😅

[Elvin]

It doesn’t work as expected, it has centered the icons and the text. 😅

To clarify: You only want the icons to be in the center?

If so, can you move the email link to the footer bar along with the social icons and text instead of adding it on the copyright bar?

So we could style them properly. Thank you.

A wise man once said:
"Have you cleared your cache?"

[Matthieu]

Hello, thank you for your answer. I added the mail in the footer widjet with the others. We therefore have 3 elements in the footer bar: Lightweight Social Icons / Personalized HTML with “Mentions légales – plan du site” / Personalized HTML with the email.

The 3 are displayed on top of each other. How to get: the email address on the left / social network icons in the center / “mentions légales – plan du site” on the right.

Thanks 😁

[David]

Hi there,

can you share a link to your site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

Hello, here it is :

[David]

Try this CSS:

.footer-bar {
    display: flex;
    align-items: center;
}

The only issue with the current CSS provided here:

https://generatepress.com/forums/topic/social-media-icons-in-the-center-of-the-footer/#post-1523163

Is that there is not enough room on smaller screens to stop those widgets from overlapping the copyright info. Where should the copy right display ? Maybe below the icons

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

This css works, it puts them all on the same line but not spaced as I wanted. Is there a possibility to remove the copyright part ?

Thanks

[Leo]

You can remove the copyright message with this CSS:

.footer-bar-align-right .copyright-bar {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

Perfect thanks, the problem is that on mobile it does not work at all, the appearance of the widjets is not as it should

[Leo]

the appearance of the widjets is not as it should

How should they appear?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

It is displayed like this currently on mobile :

[Leo]

Sorry what? That link takes me to a random site.

How would you like them to display on mobile?

Stack on top of each other?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

Stack on top of each other exactly ! 😁

[Author]

Posts