I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows:
0 0
0 0
0 0
0 0
0
0
My aim is to achieve this using jQuery on a mobile Ionic app. I want these "beads" to be centered on the screen. Below is the HTML code I currently have for my view, which I can modify if necessary:
<ion-view view-title="Pray the Rosary" id="prayer">
<ion-content>
<div id="prayer-content">
<div id="current">Sorrowful Mysteries</div>
<div ng-click="play()" id="play">Begin</div>
<div ng-click="pause()" id="pause">Pause</div>
<div class="bead" ng-class="inactive" id="bead14"></div>
<div class="bead" id="bead13"></div>
<div class="bead" id="bead12"></div>
<div class="bead" id="bead11"></div>
<div class="bead" id="bead10"></div>
<div class="bead" id="bead9"></div>
<div class="bead" id="bead8"></div>
<div class="bead" id="bead7"></div>
<div class="bead" id="bead6"></div>
<div class="bead" id="bead5"></div>
<div class="bead" id="bead4"></div>
<div class="bead" id="bead3"></div>
<div class="bead" id="bead2"></div>
<div class="bead" id="bead1"></div>
<div id="cross"><img src="../img/images/cross.png" alt=""></div>
</div>
</ion-content>
</ion-view>
The current CSS styling:
/*Prayer content*/
#prayer-content{
width: 90%;
padding: 10%;
text-align: center;
position:relative;
}
.bead{
border-radius: 50%;
width: 20px;
height: 20px;
background: #8ee5f5;
}
.active{
background: #006baf;
border: 1px dashed #fff;
}
#cross{
position: absolute;
top: 320px;
left: 154px;
}
#bead1{
position: absolute;
top: 292px;
left: 196px;
}
#bead2{
position: absolute;
top: 266px;
left: 196px;
}
#bead3{
position: absolute;
top: 240px;
left: 196px;
}
#bead4{
position: absolute;
top: 201px;
left: 191px;
width: 30px;
height: 30px;
}
#bead5{
position: absolute;
top: 180px;
left: 223px;
}
#bead6{
position: absolute;
top: 155px;
left: 236px;
}
#bead7{
position: absolute;
top: 126px;
left: 248px;
}
#bead8{
position: absolute;
top: 95px;
left: 240px;
}
#bead9{
position: absolute;
top: 76px;
left: 215px;
}
#bead10{
position: absolute;
top: 76px;
left: 180px;
}
#bead11{
position: absolute;
top: 95px;
left: 155px;
}
#bead12{
position: absolute;
top: 126px;
left: 151px;
}
#bead13{
position: absolute;
top: 153px;
left: 160px;
}
#bead14{
position: absolute;
top: 180px;
left: 173px;
}
While it appears fine on the iPhone view, it looks disorganized on the iPad. Is there a way to use JavaScript to ensure that the beads remain aligned at the center consistently?
Thank you for your suggestions!
JS Fiddle: https://jsfiddle.net/tetxwj8k/