How to align Mobile Footer menu to center

Hi there,

try this CSS:

@media(max-width: 1024px) {
    .site-info .inside-site-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

Nothing happened David with this code. I hope you got what I needed - the nav items About, Privacy, Terms, Coffee Blog and Contact links at the bottom right of screen. This are not aligned properly on mobile.

Where did you add the CSS?

In the customize>css

Can you disable any caching/minifying plugins so we can inspect your code? Right now it doesn't seem like the code David provided is applying to the element.

I am so sorry for being late...You can check now

It looks to be working now - try clearing your browser cache to see.

I have also updated the CSS here:

https://generatepress.com/forums/topic/how-to-align-mobile-footer-menu-to-center/#post-1433670

To make a little more 'specific' which should overcome any issues the Cache is causing.

I still see the footer bar items as right aligned - https://paste.pics/efb54e76eb8cdf677dd4f215275b8371

Try this CSS as well:

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu li:first-child {
        margin-left: 10px;
    }
    .footer-bar .widget_nav_menu li:last-child {
        margin-right: 10px;
    }
}

Hey Leo, this one worked up. I tweaked it a little as since the code was working dynamically -

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu li:last-child {
        margin-right: 8%;
    }
}

Glad to hear :)