This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Search Box on mobile

Resolved 5 replies premiumthemetheme-vantage
Koen
10 years ago · Last reply by Andrew Misplon 10 years ago

Hi,

When I view my website on my mobile device(iphone 6, safari) the searchbox has a radius of (I think) around 10px. I want the searchbox to curve just a little bit. But I don’t know how to fix this. On my desktop(when I make my browser screen small like a mobile device) there is just a small radius. That’s what I want on all devices.

I hope you guys understand my problem.

Does anyone know how to fix this?

URL: http://koenrobtest.nl/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 10 years, 3 months ago

    Hi Koen

    Are you asking about the search field in the mobile menu? If so, locate this rule in Custom CSS:

    .mobile-nav-frame form.search input[type=search] {
    display: block;
    width: 100%;
    font-size: 18px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #222222;
    border: none;
}

    and change it to:

    .mobile-nav-frame form.search input[type=search] {
    display: block;
    width: 100%;
    font-size: 18px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #222222;
    border: none;
    border-radius: 3px;
}
  2. Koen 10 years, 3 months ago

    Hi Andrew,

    Thanks for your reaction. I’ve changed it but it doesn’t seem te do anything. It still looks like this: https://www.dropbox.com/s/sxang4spdj3ecla/2015-11-10%2016.05.50.png?dl=0 <https://www.dropbox.com/s/sxang4spdj3ecla/2015-11-10%2016.05.50.png?dl=0&gt;

  3. Andrew Misplon Staff 10 years, 3 months ago

    Something Safari is doing on it’s own. I would do this:

    1. Add this:

    input {
    -webkit-appearance: none;
    border-radius: 0;
}

    2. Then after/following the above, add my previous Custom CSS:

    .mobile-nav-frame form.search input[type=search] {
    display: block;
    width: 100%;
    font-size: 18px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #222222;
    border: none;
    border-radius: 3px;
}
  4. Koen 10 years, 3 months ago

    Unfortunately, still no changes :(

    If this is taking a lot of time to figure out we’ll just stick with this.

  5. Andrew Misplon Staff 10 years, 3 months ago

    Thanks. Let me know if you want to come back to this. It’s only happening in Safari.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread