Archived topic
Centering One Footer Widget - Mobile
9 replies · Started by John on August 18, 2020
Hi...
I have one widget (search) enabled in the footer, and I can't get it to center on mobile. I've played with the following CSS (margin-left) but it gives different results depending how the phone is held. If it's held in portrait it's centered, but it isn't centered when held in landscape.
@media(max-width: 768px) {
.footer-widgets .search-field {
margin-left: 30px;
}
}I've also tried this CSS but it doesn't work either.
@media(max-width: 768px) {
.footer-widgets .search-field {
width: 80%;
margin: auto 0;
}
}Thanks!
Hi John,
Can you remove this CSS you've added already?
https://www.screencast.com/t/FyR8O7xvSI3
Not sure if it's needed.
Thanks, Leo.
I've commented out that CSS. I think it was useful when more than one widget was activated.
Try this CSS:
@media (max-width: 768px) {
.footer-widgets .search-form {
margin-left: auto;
margin-right: auto;
}
}That did the trick. Thank you, Leo.
I'm curious about why using (margin: auto 0;) doesn't work to center the search form but (margin-left: auto; margin-right: auto;) does.
margin: auto 0; set the top/bottom margin to auto and left/right margin to 0 so it won't actually center it horizontally.
margin: 0 auto; seems to work but I don't think I've very seen that before.
That would work too.
Thanks for the help, Leo!
No problem :)
