1

Buenas, ¿porque me salen descentrados el mapa y el texto de abajo?

introducir la descripción de la imagen aquí

Esto en la pantalla del ordenador no me pasa, me pasa cuando el ancho de la pantalla es inferior a 1200 px (aprox), es decir pantalla de un iPad por ejemplo.

¿Como podría solucionar esto?

h2 {
  font-size: 35px;
  text-align: center;
  padding-bottom: 40px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.General {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.MisDatos {
  height: auto;
  width: 75%;
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

.Datos-MisDatos {
  width: 800px;
  background-color: burlywood;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
}

.Datos-MisDatos a {
  color: black;
  background-color: darkgray;
  cursor: pointer;
}

.Datos-MisDatos a:hover {
  color: white;
  background-color: dimgrey;
}
<div class="General General-MisDatos">

  <div class="MisDatos">

    <a name="Mis-Datos"></a>

    <h2>¿Nos vemos?</h2>

    <p class="Texto-MisDatos">
      A continuación tienes nuestros datos para localizarnos.
    </p>

    <div class="Estructura-MisDatos">

      <img src="Img/Mapa.PNG" class="Mapa-MisDatos" alt="Mapa localización empresa">

      <p class="Datos-MisDatos">
        C/ Archiduque Luís Salvador, Nº 27, Piso 2, Puerta B
        <br> Palma de Mallorca, Islas Baleares, España
        <br><br> Tlf: +034 698 256 527
        <br> eMail consultas: [email protected]
        <br> eMail trabajo: <a href="#Contacto"> Pincha aquí </a>
        <br><br> Horario de oficina: 10:00 - 18:00
      </p>
    </div>
  </div>
</div>

1
  • Para adaptar tu web a distintos dispositivos tendrías que mirar bien el tema de las mediaqueries
    – Aitor
    Commented el 13 sept. 2017 a las 12:01

3 respuestas 3

2

.MisDatos tienes width: 75%; por lo que por el lado izquierdo te esta cogiendo espacio, y ocupa exactamente 800px. Al ser mayor que esos 75% aparece descentrado (más a la derecha que centrado).

Ejemplo: Ancho de 2000px, con el 75% se quedan en 1500px. 800px entran en esos 1500px, por lo que SI queda centrado.

Ejemplo2: Ancho de 1000px, con el 75% se quedan en 750px. 800px no entra en esos 750px, por lo que NO quedará centrado y sobresaldrá por la derecha.

Te dejo comentado el width:75%; y ves como ya no ocurre hasta que llegue a los 800px.

Para controlar los dispositivos de un ancho menor que 800px necesitas utilizar media queries.

h2 {
  font-size: 35px;
  text-align: center;
  padding-bottom: 40px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.General {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.MisDatos {
  height: auto;
  /*width: 75%;*/
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

.Datos-MisDatos {
  width: 800px;
  background-color: burlywood;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
}

.Datos-MisDatos a {
  color: black;
  background-color: darkgray;
  cursor: pointer;
}

.Datos-MisDatos a:hover {
  color: white;
  background-color: dimgrey;
}
<div class="General General-MisDatos">

  <div class="MisDatos">

    <a name="Mis-Datos"></a>

    <h2>¿Nos vemos?</h2>

    <p class="Texto-MisDatos">
      A continuación tienes nuestros datos para localizarnos.
    </p>

    <div class="Estructura-MisDatos">

      <img src="Img/Mapa.PNG" class="Mapa-MisDatos" alt="Mapa localización empresa">

      <p class="Datos-MisDatos">
        C/ Archiduque Luís Salvador, Nº 27, Piso 2, Puerta B
        <br> Palma de Mallorca, Islas Baleares, España
        <br><br> Tlf: +034 698 256 527
        <br> eMail consultas: [email protected]
        <br> eMail trabajo: <a href="#Contacto"> Pincha aquí </a>
        <br><br> Horario de oficina: 10:00 - 18:00
      </p>
    </div>
  </div>
</div>

2

Lo primero creo que seria que el mapa estuviera a linea con el box de los datos, para ello deberías cambiar esto:

.Mapa-MisDatos {
  width: 800px;
  margin: 20px;
}

Por

.Mapa-MisDatos {
  width: 800px;
  margin: 20px 0px;
}

En cuanto al problema general, diría que esta aquí:

.MisDatos {
  height: auto;
  **width: 75%;**
  margin: 0 auto;
  text-align: center;
}

.Mapa-MisDatos {
  **width: 800px;** 
  margin: 20px;
}

Cuando la pantalla es de menor tamaño, y el tamaño del 75% del contenedor es menor que los 800px del contenido, empieza la fiesta... Eso podria explicar porque te pasa en pantallas de menos de 1200px como dices.

Prueba esto a ver si te lo soluciona, copia estos ajustes:

.MisDatos {
  height: auto;
  width: 100%;
  max-width: 800;
  margin: 0 auto;
  text-align: center;
}
1

Muy sencillo:

Añade max-width: 100%; a .Datos-MisDatos y a .Mapa-MisDatos se adaptará a la pantalla:

.Mapa-MisDatos, .Datos-MisDatos {
    max-width: 100%;
}

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.