Is there a way to arrange these 4 buttons in a layout resembling a game controller? Currently, they are displayed like this and I want them to be centered at the bottom of the screen, smaller, and responsive. What changes should I make? Would using #controls { position:relative;} help?
https://i.sstatic.net/iAd1o.png
Sample HTML Code:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"/>...</head>
<body><div id="controls">
<button id="keyboard_key_up" class="movements_control"><img src="public/img/keyboard_key_up.png"/></button>
<button id="keyboard_key_left" class="movements_control"><img src="public/img/keyboard_key_left.png" /></button>
<button id="keyboard_key_down" class="movements_control"><img src="public/img/keyboard_key_down.png" /></button>
<button id="keyboard_key_right" class="movements_control"><img src="public/img/keyboard_key_right.png" /></button>
</div>...</body>
Sample CSS Code:
#keyboard_key_up {
position: absolute;
right:300px;
bottom: 500px;
border-style: solid;
border-color: black;
background: white;z
}
#keyboard_key_left {
position: absolute;
right:575px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_down {
position: absolute;
right:300px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_right {
position: absolute;
right:25px;
bottom: 250px;
border-style: solid;
border-color: black;
}