0

Tengo una plantilla wordpress la cuál tiene diseño responsivo pero agregue algunos elementos html y css, y estos que fuerón agregados no se adaptan al diseño responsivo del diseño, cuando hago el navegador mas chico, no se adapta el div agregado a diseño responsive. ¿que tengo que agregar para que se adapten también? Estos son lo que agregue en pagina html y archivo css.

<div class="caja" style="text-align: center;">Patrocinador</div>

.caja {

font-family: sans-serif;
font-size: 30px;
font-weight: 400;

color: #ffffff;

background: #000000;

overflow: hidden;
padding: 20px;
text-align: center;
margin: auto;

height: 25px;
width: 1130px;



}

1 respuesta 1

1

Al estar trabajando con tu caja en medidas PX, siempre va coger 1130px como ancho fijo de pantalla, con lo cual no se hace responsivo.

Una solución podría ser: cambiando width: 1130px; a max-width: 1130px; y añadimos un width:100%;

Con esto estamos diciendo que el ancho de nuestra caja va ser el 100% de pantalla, pero su máximo permitida es 1130 pixeles, con lo cual en pantallas con un ancho superior solo va rellenar 1130px de pantalla.

   

.caja {
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #ffffff;
  background: #000000;
  overflow: hidden;			
  text-align: center;
  padding: 20px 0;
  /* Reglas responsivo */
  width:100%;
  max-width: 1130px;      
}

/* Modificamos algunos valores en pantallas con 500px de ancho o inferior si uno lo desea */
@media screen and (max-width: 500px) {
  .caja {				
    font-size: 20px;				
  }
}
<div class="caja">Patrocinador</div>

En pantallas por ejemplo HD o superiores a 1130px, te va rellenar solamente 1130px, ya que con el max-width estamos declarando su maximo permitido en px. Si la pantalla es inferior a 1130px si te va rellenar el 100% como se puede observar en el ejemplo cuando se ejecuta.

introducir la descripción de la imagen aquí

Solución para que la caja rellene el total de pantalla:

  

.caja {
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #ffffff;
  background: #000000;
  overflow: hidden;			
  text-align: center;
  padding: 20px 0;
  /* Reglas responsivo */
  width:100%;
  /* Solución */
  max-width: 100%;      
}

/* Modificamos algunos valores en pantallas con 500px de ancho o inferior si uno lo desea */
@media screen and (max-width: 500px) {
  .caja {				
    font-size: 20px;        
  }
}
<div class="caja">Patrocinador</div>

Ejemplo Pantalla HD:

Al trabajar con % si que se se hace responsivo a cualquier resolución de pantalla.

introducir la descripción de la imagen aquí

5
  • de acuerdo, gracias, disculpe y ¿para que el elemento div en tamaño normal abarque todo el ancho de la pantalla, que no deje margenes a los lados? Commented el 22 ene. 2017 a las 18:13
  • @ArmandoArellano en pantalla normal para que tome el ancho total de pantalla, podrías añadir un @media screen and (max-width:medida deseado) y modificas tu .caja a max-width:100%;, ahora si siempre deseas que tome el ancho total de pantalla y responsivo, simplemente modificas max-width a 100%. ¡Un saludo!
    – D.Bulten
    Commented el 22 ene. 2017 a las 18:32
  • busco que abarque el ancho total, ¿podrías agregarlo a la respuesta, por favor? Commented el 22 ene. 2017 a las 18:50
  • @ArmandoArellano te e modificado mi respuesta, te he añadido otro ejemplo con lo cual .caja se adapta de manera responsivo al ancho total de cualquier pantalla.
    – D.Bulten
    Commented el 22 ene. 2017 a las 19:34
  • 1
    mucchas gracias, saludos Commented el 22 ene. 2017 a las 19:42

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.