Puedes ir haciendo todo más chico para resoluciones máximas. Empezando por 768px
que es la medida de las tablets y después puedes ir por 480px
que son los celulares.
En el siguiente link te dejo lo que has hecho pero con cambios para que tome los responsive, lo que hice fue achicar las medidas que tenías inicialmente y ponerle un min-width
al contenedor para que no se rompa en caso de tener pocos caracteres, más que nada para :(
que se veía mal.
@media only screen and (max-width: 768px) {
.bubble {
padding: 5px 7px;
min-width: 30px;
}
.bubble:after,
.bubble:before {
border-bottom-width: 12.5px;
border-right-width: 12.5px;
bottom: -12.5px;
right: 12.5px;
}
.bubble:before {
border-right-width: 12.5px;
bottom: -14px;
right: 11px;
}
}
Para el posicionamiento de los <div>
con respecto al responsive podés usar el window.addEventListener("resize", miFuncionResize)
y capturado el evento, calcular la nueva posición y cambiar las posiciones de los <div>
.