Your button may be going off the screen on smaller devices due to its current positioning properties. For screens with a size of 1136 x 640 pixels or smaller, your button might not be visible. To fix this issue, you can use a media query to adjust the button's position based on different screen sizes.
The following code snippet positions the button at 100px from the top and left on small screens. On screens wider than 900px, the button will be moved to 1180px from the left and 520px from the top.
.sound_button {
background: #FFD700 url("Images/background1.jpg") center;
}
.sound_container {
position: absolute;
left: 100px;
top: 100px;
}
@media (min-width: 900px) {
.sound_container {
left: 1180px;
top: 520px;
}
}
<div class="w3-container sound_container w3-mobile">
<button class="w3-button w3-circle w3-xxlarge sound_button "><i class="fa fa-music ">Button</i></button>
</div>
If you want the button to move in proportion to the screen size, you can use percentages for the left and top properties. The code below centers the button both horizontally and vertically on the screen.
.sound_button {
background: #FFD700 url("Images/background1.jpg") center;
}
.sound_container {
position: absolute;
left: 50%;
top: 50%;
}
<div class="w3-container sound_container w3-mobile">
<button class="w3-button w3-circle w3-xxlarge sound_button "><i class="fa fa-music ">Button</i></button>
</div>