1

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>

1

1 respuesta 1

3

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

5
  • Osea ir a chicandolas manualmente para cada resolucion que usare reduciendole los pixeles,pero otra cosa seria el posicionamiento de los div qe no los toma cuando cambia la resolucion como los puedo mover a los puestos en lo que deberan pasar en esa resolucion,llamandolos asi por id no me los toma
    – psy
    Commented el 17 may. 2018 a las 14:14
  • Para los posicionamientos vas a tener que usar javascript, calculando la nueva posición y cambiándola en el respectivo div.
    – Kleith
    Commented el 17 may. 2018 a las 14:17
  • si pero como haria para indicarle a js que haga ese posicionamiento cuando la pantalla cambie
    – psy
    Commented el 17 may. 2018 a las 14:20
  • 1
    Ya gracias a lo que me dijiste me abriste los ojos y lo encontre gracia,es.stackoverflow.com/a/3202/82187 aqui dejare el link de la respuesta que me ayudo a redimensionar los elementos
    – psy
    Commented el 17 may. 2018 a las 14:40
  • Excelente! Hay diferentes formas, todo depende de como lo hagas y como querés que funcione.
    – Kleith
    Commented el 17 may. 2018 a las 14:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.