[Resolved] Centering One Footer Widget – Mobile

[John]

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!

[Leo]

Hi John,

Can you remove this CSS you’ve added already?
https://www.screencast.com/t/FyR8O7xvSI3

Not sure if it’s needed.

[John]

Thanks, Leo.

I’ve commented out that CSS. I think it was useful when more than one widget was activated.

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .footer-widgets .search-form {
        margin-left: auto;
        margin-right: auto;
    }
}

[John]

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.

[Leo]

margin: auto 0; set the top/bottom margin to auto and left/right margin to 0 so it won’t actually center it horizontally.

[John]

margin: 0 auto; seems to work but I don’t think I’ve very seen that before.

[Leo]

That would work too.

[John]

Thanks for the help, Leo!

[Leo]

No problem 🙂

[Author]

Posts