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