Home>Support>Search Box on mobile

Search Box on mobile

By Koen, 8 years ago. Last reply by Andrew Misplon, 8 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    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. 8 years, 10 months ago Koen

    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. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    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. 8 years, 10 months ago Koen

    Unfortunately, still no changes :(

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

  5. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More