Footer isn't centered

Hi there,

Everything looks centered in your screenshot to me.

Do you want the menu items in the footer widget to center or something?

Hi Leo

I want footer section centred, check the screenshot, where the footer isn't centred https://ibb.co/2qxJCvJ

My staging site URL:https://wordpress-394091-1251842.cloudwaysapps.com/

Hi there,

temporarily add this CSS:

.footer-widgets .widget-title {
    background-color: #ccc;
}

It's an easy way of seeing that each of your widgets are 20% wide and that the row is actually centred on the page.

What you're asking is effectively to break the 20% width and allow some footer widgets to be wider than others - which you can do with this CSS:

@media(min-width: 1025px) {
    .site-footer .footer-widgets-container .inside-footer-widgets {
        display: flex;
        justify-content: space-between;
    } 
    .site-footer .footer-widgets-container .inside-footer-widgets .grid-20 {
        width: unset;
    } 
}

thank you David

You're welcome

I have discovered a problem with my footer when it's in Ipad, could you guys check it out. (note: that I don't have the code/s above)
SCREENSHOT https://ibb.co/P6jW0Wn
URL https://wordpress-394091-1251842.cloudwaysapps.com

Tom provides some code here to make it two columns on Portrait tablet:

https://generatepress.com/forums/topic/footer-widget-tablet-portrait-view/#post-278946

you can reduce the min-width: 769px value to a smaller value e.g min-width: 700px to keep it 2 column on smaller devices.

Thanks, David

For the past 10 minutes, I played with the number for min-width: couldn't succeed.

Try this CSS:

@media (max-width: 1024px) and (min-width: 600px) {
    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        display: flex;
        flex-wrap: wrap;
    }

    .site-footer .inside-footer-widgets>div {
        width: 50%;
    }
}

legend thanksss

You're welcome

https://generatepress.com/forums/topic/footer-isnt-centered/#post-1267112

Hi,
May I request updated CSS for the new flexbox Structure?

Try this:

@media (max-width: 1024px) and (min-width: 600px) {
    .footer-widgets .inside-footer-widgets {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer .inside-footer-widgets>div {
        flex: 1 1 50%;
        margin-bottom: 2em;
    }
}

Thanks for the reply

This no space between the Widget titles & content
https://ibb.co/VWwrXvs