Sorry if my wording is a bit off, I'm still relatively new to working with CSS and HTML. I've encountered an issue where the dropdown options appear much larger than the select box itself when clicked. I can't seem to figure out how to fix it. It seems to be related to the window size (1080x2400) because the problem doesn't occur in a regular window without inspect element open. Any help would be appreciated!
Here's a screenshot of the overflow issue
HTML:
<div class="addSoundScreen">
<label for="audioType">Choose Category</label>
<select id="audioType">
<option value="music">Music</option>
<option value="ambiance">Ambiance</option>
<option value="effects">Effects</option>
</select>
</div>
CSS
.addSoundScreen {
display: none;
position: fixed;
box-sizing: border-box;
padding: 1%;
background-color: rgba(0, 0, 0, 0.705);
bottom: 20vh;
left: 15vw;
height: 70vh;
width: 70vw;
border-radius: 10%;
flex-direction: column;
align-items: center;
font-size: 280%;
text-align: center;
color: aliceblue;
}
.addSoundScreen select {
margin: 1%;
width: 60%;
height: 5%;
font-size: 100%;
}
When I tried increasing the font size, the issue got worse. Even adjusting the font size of the "options" doesn't solve the problem of extra room overflowing out of the window (as shown in the screenshot).