#content{
    width: 100%;
}
.part{
    background-color: #000000;
    float:left;
    margin-right: 2px;
    margin-bottom: 2px;
}

@media screen and (min-width: 240px) and (max-width: 540px){
    .part{
        width:5px;
        height: 5px;
        border-radius: 11px ;
    }
}


@media screen and (min-width: 540px) and (max-width: 768px){
    .part{
        width:9px;
        height: 9px;
        border-radius: 11px ;
    }
}



/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 768px) and (max-width: 1024px){
    .part{
        width:13px;
        height: 13px;
        border-radius: 11px ;
    }
}



/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 768px) and (max-width: 1024px){
    .part{
        width:15px;
        height: 15px;
        border-radius: 11px ;
    }

}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
    .part{
        width:20px;
        height: 20px;
        border-radius: 14px ;
    }

}