[Resolved] WordPress search box in header – full width on mobile?

[Richard]

Hello!
We are in the process of rebuilding our site using GP/Elementor.
In the header, I am using a WordPress search box that pulls in Google search results. (which is working fine)
I have some custom css associated with it:
/*Search*/
input#search-input {
background-image: url(/wp-content/uploads/magnifying-glass3.png);
background-repeat: no-repeat;
background-position: right;
}

I am trying to get the search box to be full width on mobile. (if you resize your browser window, you will see that the search box sits to the left, and not full width.

I tried adding background-origin: content-box;
width: 100%;
to the above code, which made it full width, but on a mobile device (iPhone 6/latest iOS) the entire website could be moved to the left of the screen. (with a horizontal scrollbar appearing at the bottom)

Any help would be greatly appreciated.

[Leo]

Hi there,

Give this CSS a shot:

@media (max-width: 768px) {
    input#search-input {
        width: 100%;
        display: flex;
    }
}

[Richard]

Thanks Leo, unfortunately it is still doing the same thing. Have a look at this screenshot from my phone. When the search box is 100%, I am able to slide the website to the left:
Screenshot

[Richard]

Hello,
haven’t heard back in a while.
Are there any addition things I can try?
Thanks!

[David]

Hi there,

apologies it looks like you’re reply got past our system. I have edited Leo’s CSS above – which should fix the problem.

[Richard]

Thanks David!
It looks like flex was the missing piece.
Really appreciate it.

[David]

You’re welcome

[Author]

Posts