Tengo varios div como estos en mi pagina qe al hacer hover sobre un mapeado saldran a flote en dicha posicion que les otorge,pero tengo un problema y es que cuando cambia la resolucion la pagina es responsive pero los div no y se quedan los div del mismo tamaño y en la misma posicion y nose como hacer que se adapten al tamaño de la pagina y se agraden o encojan despendiendo la resolucion y que se posicionen nuevamente en el lugar correcto,ya que al achicarse o agrandarse el mapeo cambia ya que es responsive pero ellos no
.bubble {
background-color: #00CCCC;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
3px 3px 0 hsla(0,0%,0%,.1);
color: #006699;
display: block;
font: 16px/25px sans-serif;
padding: 15px 25px;
position: absolute;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
box-sizing: border-box;
word-wrap: break-word;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #00CCCC;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles */
#Target{
top: 5% ;
left: 20%;
}
<div id="Target" class="bubble" style="top: 27%; left: 23.2%;" >Hola chicos</div>
<div id="Cliente" class="bubble" style="top: 35%; left: 10.4%;" >Que tal?</div>
<div id="SegP" class="bubble" style="top: 48%; left: 4.4%;" >:(</div>