a href not working and not resizing - html

Question

My a href inside a div is not working I saw that the width and height was 0px, so I tried to increase size, but it doesn't get increased.
Each dot is supposed to send you to another page in the onepage scroller I'm making
.dotstyle-scaleup{
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li{
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup #current1{
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
<div id="wrapper">
<!-- Landings -->
<div class="section" data-anchor="page1" style="background-color: red">
<div class="dotstyle-scaleup">
<ul>
<li id="current1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

Answer 1

As the elements in question contain no content, declaring height and width properties won't be enough.
Consider declaring a display property, in addition to specifying a height and width property for the nested anchor elements (a) e.g:
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
Code Snippet Demonstration:
.dotstyle-scaleup {
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li {
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup #current1 {
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
/* Additional */
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
<div id="wrapper">
<!-- Landings -->
<div class="section" data-anchor="page1" style="background-color: red">
<div class="dotstyle-scaleup">
<ul>
<li id="current1">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>