How do I stop my links from being clicked beneath it? - html

Question

For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.
My friend said I had to reduce div size but I'm not quite sure on what he meant.
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
#steam,
#youtube {
text-decoration: none;
font-family: cursive;
font-style: oblique;
}
#devil {
border-radius: 120px;
top: 250px;
right: 20px;
}
#steam {
top: 280px;
left: 10px;
}
#youtube {
top: 50px;
left: 115px;
}
a:link,
a:visited {
color: forestgreen;
}
<div>
<img id="devil" src="img/frizzy.jpg">
</div>
<div>
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>

Answer 1

Your problem is probably in here:
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.

Answer 2

In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.
As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.

Answer 3

Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.

Answer 4

You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.
.container {
margin-top: 20px;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
.social_container {
margin: 0px auto;
padding: 10px;
width: 200px;
}
#steam,
#youtube {
margin: 0px auto;
width: 80px;
display: inline-block;
text-decoration: none;
font-family: cursive;
font-style: oblique;
text-align: center;
}
#devil {
border-radius: 120px;
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
a:link,
a:visited {
color: forestgreen;
}
<div class="container">
<img id="devil" src="img/frizzy.jpg">
</div>
<div class="social_container">
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>