Сделав мое окно поиска более мобильным

Question

Сейчас он отлично смотрится на рабочем столе, но для мобильных устройств он просто плавает в середине страницы, и когда вы пытаетесь набрать его, вы не видите, что печатаете.

Изображение, которое вы видите здесь, для рабочего стола

На мобильном устройстве это просто маленький шарик в центре

Рабочий стол - вверху справадля справки.Почему это будет двигаться в середине на мобильном телефоне?

    // Search
.block-search {
    display: inline-block;
    .label {
        display: inline-block;
        float: none;
    }
    input {
        border-radius: 50px;
        height: 40px;
        padding-left: 20px;
        padding-right: 44px;
    }
    .control {
        border-top: 0;
        clear:none;
        margin: 0;
        padding: 0;
    }
    .action.search {
        background: #5a5a5a;
        border-radius: 50px;
        height: 34px;
        right: 4px;
        top: 3px;
        width: 34px;
    }
    .search-autocomplete ul:not(:empty) {
        border-color: #c2c2c2;
        border-top: 1px solid #c2c2c2;
    }
    .search-autocomplete ul {
        li {
            border-color: #c2c2c2;
            &:hover {
                background-color: #e5e5e5;
            }
            .amount {
                color: #444;
            }
        }
        .selected {
            background-color: #e5e5e5;
        }
    }
}

Answer 1

В 2019 году использовать макет float s не модно и не практично.Вместо этого вы должны использовать flexbox или (если ваш дизайн требует более сложной компоновки) CSS Grid.Вы хотите сохранить макет как можно выше.Установите правила в родительском контейнере (ах) и позвольте дочерним потокам работать так, как вы определили.

Вот простой пример.

• Установите ширину родительского контейнера, которая может быть небольше, чем ширина области просмотра
• Центрировать все header content
• Старайтесь не устанавливать явные height для элементов.Вместо этого используйте отступы.Это будет хорошо масштабироваться при разных пользовательских размерах шрифта.

html, body { margin: 0; }

.container {
  width: 960px;
  max-width: 100vw;
}

header {
  padding: 0.5em 0;
  display: flex;
  justify-content: center;
}

.searchBox {
  border: 1px solid gray;
  border-radius: 20px;
  padding: .5em 1em;
}

<div class="container">
  <header>
    <input type="search" class="searchBox" placeholder="Search…">  
  </header>  
</div>

jsFiddle