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

Home Forums Support WordPress search box in header – full width on mobile?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #933733
    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.

    #933738
    Leo
    Staff
    Customer Support

    Hi there,

    Give this CSS a shot:

    @media (max-width: 768px) {
        input#search-input {
            width: 100%;
            display: flex;
        }
    }
    #934407
    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

    #939658
    Richard

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

    #939686
    David
    Staff
    Customer Support

    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.

    #939770
    Richard

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

    #939823
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.