Archived topic
Footer widgets justify on desktop, and centred in a column for tablet/mobile
7 replies · Started by Michael on October 15, 2021
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?
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 :)
Hi David
Perfect! Many thanks for the fix and the learning point too - very useful!
Glad to be of help!
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?
Hi Dan,
Can you open a new topic and link us to your site? :)
Hi Ying,
The new topic number is #2028288.
Answered there :)
