Skip to main content
se añadieron 297 caracteres en el cuerpo
Origen Enlace
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-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>.

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>.

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) capturado el evento, calcular la nueva posición y cambiar las posiciones de los <div>.

se añadieron 297 caracteres en el cuerpo
Origen Enlace
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-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>.

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;
  }
}

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>.

se eliminaron 41 caracteres en el cuerpo
Origen Enlace
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-width: 12.5px solid transparent;5px;
    border-right-width: 12.5px solid #00cccc;5px;
    bottom: -12.5px;
    right: 12.5px;
  }
  .bubble:before {
    border-right-width: 12.5px solid hsla(0, 0%, 0%, 0.1);5px;
    bottom: -14px;
    right: 11px;
  }
}

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;
  }
}

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;
  }
}
Origen Enlace
Kleith
  • 3.8k
  • 2
  • 16
  • 28
Loading