Skip to main content
1 de 4
Kleith
  • 3.8k
  • 2
  • 16
  • 28

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: 12.5px solid transparent;
    border-right: 12.5px solid #00cccc;
    bottom: -12.5px;
    right: 12.5px;
  }
  .bubble:before {
    border-right: 12.5px solid hsla(0, 0%, 0%, 0.1);
    bottom: -14px;
    right: 11px;
  }
}
Kleith
  • 3.8k
  • 2
  • 16
  • 28