[Resolved] Footer widgets justify on desktop, and centred in a column for tablet/mobile

[Michael]

Hi

I’ve got lost with the CSS on this one and hope you can help. I have two Footer Widgets and I want them to justify with space-between (in flex terminology) on a desktop view, but to stack in a column and be centred on a tablet/mobile view.

Could you advise how I need to change my CSS?

[David]

Hi there,

looks like the justify space between is working on desktop.
For tablet and mobile, change this CSS:

@media (max-width: 1024px) {
    .inside-footer-widgets {
        flex-direction: column;
        justify-content: center;
    }
}

to:

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

Thing to note with flex is the justify and align are relative to the flex-direction.
So when you switch to flex-direction: column; you actually use align to justify the items, because the flow has changed 🙂

[Michael]

Hi David

Perfect! Many thanks for the fix and the learning point too – very useful!

[David]

Glad to be of help!

[Dan]

Hi David,

I used the CSS code suggested above, but it doesn’t work for me. I look for the same setup model on footer widgets of GeneratePress, all (Title, contained) justify on center with breakpoint 1024px.
Can you help me, please?

[Ying]

Hi Dan,

Can you open a new topic and link us to your site? 🙂

[Dan]

Hi Ying,

The new topic number is #2028288.

[Ying]

Answered there 🙂

[Author]

Posts