I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them.
I experimented with vh, vw, and percentages, yet when I resize my screen, the dots lose their position.
Can anyone assist me in making these dots responsive? My goal is to keep them fixed on the map regardless of its location.
Note: If there's an alternative method to achieve the same result, please suggest it.
Find the code on codepen below: HTML:
<div id="map">
<div class="img-container">
<img src="http://res.cloudinary.com/reddelicious/image/upload/v1496891721/map_no-dots_mptb8a.png" alt="Map">
</div>
<div id="dots">
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
<div class="dot dot-4"></div>
<div class="dot dot-5"></div>
<div class="dot dot-6"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
<div class="dot dot-9"></div>
<div class="dot dot-10"></div>
<div class="dot dot-11"></div>
<div class="dot dot-12"></div>
<div class="dot dot-13"></div>
<div class="dot dot-14"></div>
<div class="dot dot-15"></div>
<div class="dot dot-16"></div>
<div class="dot dot-17"></div>
<div class="dot dot-18"></div>
<div class="dot dot-19"></div>
<div class="dot dot-20"></div>
<div class="dot dot-21"></div>
</div>
CSS:
/* Adapted from original pulsating dots by sharla */
@keyframes pulse {
0% {box-shadow: 0px 0px 0px 0px rgba(52, 106, 180, 1);}
100% {box-shadow: 0px 0px 0px 7px rgba(52, 106, 180, 0.0);}
}
body {
background-color: #111114;
}
img {
width: 100%;
max-width: 100%;
}
#map {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.dot {
width: 9px;
height: 9px;
border-radius: 50%;
animation: pulse 1.5s infinite ease-out;
background: #346ab4;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
&:before {
content: '';
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: rgba(255, 255, 255, 0.4);
}
&:nth-child(odd) {
animation: pulse 1.5s infinite ease-out 0.3s;
}
/* Dot positions */
@media (min-width: 768px) {
width: 16px;
height: 16px;
&-1 { top: 34%; left: 14.5%; }
&-2 { top: 43%; left: 15.5%; }
&-3 { top: 51%; left: 20.5%; }
&-4 { top: 61%; left: 27%; }
&-5 { top: 68%; left: 29%; }
&-6 { top: 79%; left: 29%; }
&-7 { top: 39%; left: 47%; }
&-8 { top: 30%; left: 46%; }
&-9 { top: 27%; left: 47%; }
&-10 { top: 31%; left: 47.5%; }
&-11 { top: 34%; left: 48.5%; }
&-12 { top: 47%; left: 53%; }
&-13 { top: 56%; left: 47.5%; }
&-14 { top: 78%; left: 53%; }
&-15 { top: 56%; left: 76%; }
&-16 { top: 62%; left: 78%; }
&-17 { top: 41%; left: 79%; }
&-18 { top: 52%; left: 70%; }
&-19 { top: 26%; left: 51.5%; }
&-20 { top: 39%; left: 27%; }
&-21 { top: 82%; left: 88.5%; }
@keyframes pulse {
0% {box-shadow: 0px 0px 0px 0px rgba(52, 106, 180, 1);}
100% {box-shadow: 0px 0px 0px 10px rgba(52, 106, 180, 0.0);}
}
}
}