Как сделать, чтобы кнопка выглядела одинаково на всех устройствах в css?

Я работаю над веб-сайтом, на котором хочу, чтобы кнопка поиска выглядела одинаково на всех мобильных и планшетных устройствах. Для этого я создал скрипку. Код, который я использовал для кнопки поиска (для мобильного/планшета):

@media only screen and (max-width: 767px) {
  #gv_search_button_2777 {
    padding-left: 5.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    padding-right: 5.5%;
    background-color: white;
    font-size: 12px;
    border-radius: 3.5px;
    border: 1px solid #ccc!important;
  }
}

<div class="gv-search-box gv-search-box-submit">
  <input type="hidden" name="mode" value="all">
  <input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>

Постановка проблемы:

Если я возьму приведенную выше fiddle в мобильном представлении из реального браузера, это выглядит хорошо, но если я вижу это с моего телефона, это выглядит иначе.

Вот скриншот кнопки «Поиск», которую я хочу видеть на всех мобильных устройствах:

Мне интересно, какие изменения мне нужно внести в коды CSS в моей скрипке, чтобы приведенный выше снимок экрана присутствовал на всех устройствах.

На моем iphone при проверке сафари и хрома я вижу это (что неправильно):