Настройка навигационной панели для дисплея iPhone 8

Question

На iPhone 8 панель навигации / режимы с режимами и результатами в JavaScript-игре, которую я построил, не отображает все элементы в одной строке, а вместо этого заставляет последний режим (жесткий) перейти на вторую строку.Я пробовал несколько вариантов изменения размера и flexbox, но просто не могу это исправить.Любая помощь будет принята с благодарностью.

Вот HTML:

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button class="mode">Easy</button>
    <button class="mode selected" class="selected">Hard</button>
</div>

Вот CSS:

#stripe {
    background-color: white;
    text-align: center;
}

#message {
    display: inline-block;
    width: 20%;
}

@media (max-width: 480px) {
  #container {
    margin-top: 10px;
  }
  #colorDisplay {
    font-size: 100%;
  }
}

Answer 1

Вы можете попробовать это решение с помощью flex.

#stripe {
    display:flex;
    justify-content:center;
    align-items: center;
    
    background-color: white;
}

#message {
    flex-basis: 20%;
    text-align: center;
}

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button class="mode">Easy</button>
    <button class="mode selected" class="selected">Hard</button>
</div>