[Resolved] Center Lightweight Social Icons on mobile screen

[Pieter]

Hi,

I have 2 footer widgets and in the second one there is the Lightweight Social Icons. I aligned it to the right (the 1st footer widget is to the left), but on tablet/mobile screens I would like to center the icons. I can’t find the css to do this.

Thank you in advance!

[Leo]

Hi there,

There is only 1 footer widget currently?

Can you add the second one in so I can find the CSS?

[Pieter]

Hi Leo,

That’s strange. When not logged in the footer widget 2 dissapears. Also there’s a huge gap below the footer. I made for the left widget 2 html “pages” and gave them a class to disable one on the mobile to align it better.

Ah find it already, I forgot a bracket } in the css. Now you can see the lightweight icons!

[Leo]

This CSS should center them on mobile now:

@media (max-width: 768px) {
    ul.lsi-social-icons.icon-set-lsi_widget-2 {
        text-align: center !important;
    }
}

You might be interested in this article as well: https://docs.generatepress.com/article/responsive-display/

[Pieter]

Ah great! Thnx Leo! Had to use the ul. before the class text I see.

[Leo]

No problem!

[Author]

Posts