When viewing my JavaScript game on an iPhone 8, the navbar/stripe displaying modes and results doesn't show all items on one line. Instead, it causes the last mode (hard) to drop to a second line. I've attempted various resizing and flexbox options, but can't seem to find a solution. Any assistance would be highly valued.
See below for the HTML code:
<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>
Check out the CSS code as well:
#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%;
}
}