How do you make multiple radio buttons over an image responsive? - html

Question

I have a picture of Hawaiian islands and I've placed 8 radio buttons with absolute position. But when I use the Chrome inspector to see if the image with the radio buttons are responsive, I see that they are not and the buttons don't stay on the spot on the image that were on full screen. Any suggestions?
CSS:
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}
#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}
#radio3{
position:absolute;
top:63.2%;
left:34.05%;
}
#radio4{
position:absolute;
top:66.8%;
left:38%;
}
#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}
#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}
#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}
#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}
#third.form img{
display:block;
max-width: 100%;
height: auto;
HTML:
<img src="map.png">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>

Answer 1

Okay so the the dots position changes because the left and top positions are with respect to the entire container and not the containing div itself.

Answer 2

From the snippet you are positioning the radio buttons absolute to the body element.
Since image tag is inline and cannot hold html child elements, simply place the radio buttons in a div (parent) and add a background image to your div. Then you will notice how the radio button are positioned absolute to the parent (div container)
#container{
position:relative;
background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRiWmnVBwnR9ddbHOGmGaoA3gTrU5r3pslI-IybKWIJz4Amy6VA);
background-size:cover;
width:200px;
height:200px;
}
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}
#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}
#radio3{
position:absolute;
top:63.2%;
left:34.05%;
}
#radio4{
position:absolute;
top:66.8%;
left:38%;
}
#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}
#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}
#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}
#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}
#third.form img{
display:block;
max-width: 100%;
height: auto;
<div id="container">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

Answer 3

First you need to use a container to wrap the radio button children, and you can set the island image as the background.
Then make use of the media queries to set the image size to achieve a responsive design.
.container {
position: relative;
background-image: url(http://hawaiian-words.com/hw/wp-content/uploads/2014/09/hawaii-island-road-map.jpg);
background-size: cover;
width: 884px;
height: 927px;
}
#radio1 {
position: absolute;
top: 58.9%;
left: 24.4%;
}
#radio2 {
position: absolute;
top: 57.5%;
left: 27.1%;
}
#radio3 {
position: absolute;
top: 63.2%;
left: 34.05%;
}
#radio4 {
position: absolute;
top: 66.8%;
left: 38%;
}
#radio5 {
position: absolute;
top: 68.9%;
left: 40.4%;
}
#radio6 {
position: absolute;
top: 69.7%;
left: 38.8%;
}
#radio7 {
position: absolute;
top: 73.1%;
left: 40.5%;
}
#radio8 {
position: absolute;
top: 78.8%;
left: 45.5%;
}
#third.form img {
display: block;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 768px) {
.container {
width: 884px;
height: 927px;
}
}
#media (max-width: 768px) and (min-width: 480px) {
.container {
width: 663px;
height: 695px;
}
}
#media (max-width: 480px) {
.container {
width: 442px;
height: 463px;
}
}
<div class="container">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>