I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositioning on mobile devices?
Hopefully, you can see the yellow border for reference.
Desktop screenshot:
Mobile screenshot:
Upon zooming in on a mobile device, the player gradually moves towards its intended position (and the controls become visible) - as you continue to zoom, it keeps moving upwards until reaching the middle of the element:
Zoomed-in mobile screenshot:
I have experimented with various position values and conducted thorough research online. However, I am unable to comprehend the root cause of this issue, making it challenging to identify where to begin troubleshooting. I hope someone could provide assistance.
HTML:
<div id="audiowrap">
<audio controls controlsList="nodownload">
Your browser does not support HTML5 Audio
</audio>
</div>
CSS:
audio { margin:0 0 0 5px; width:540px; }
#audiowrap {
margin:0 auto; border: 1px solid yellow;
}