2
respuestas

Problema con las MediaQuery

Hice tal cual lo que explico el instructor y aun asi no se me aplica la parte responsive, no se si alguien me podría ayudar con eso! Adjunto el css para ver donde puede estar el error,desde ya gracias!

body{
    font-family: 'Montserrat', sans-serif;
}
header{
    background-color:#BBBBBB;
    padding: 20px 0;
}
.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}
nav{
    position: absolute;
    top: 110px;
    right: 0;
}
nav li{
    display: inline;
    margin: 0 0 0 15px;
}
nav a{
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}
.servicios{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}
.servicios li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box; 
    border: 2px solid black;
    border-radius: 10px;
}
.servicios li:hover{
    border-color:#c78c19 ;
}
.servicios li:active{
    border-color:#088c19;
}
.servicios h2{
    font-size: 30px; 
    font-weight: bold;
}
.servicios li:hover h2{
    font-size: 33px;
}
.producto-descripcion{
    font-size: 18px;
}
.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background:url(bg.jpg);
    padding: 40px;
}
.copyright{
    color: white;
    font-size: 13px;
    margin: 20px;
}
form{
    margin: 40px 0;
}
form label,form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin: 20px 0;
}
.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}
.enviar:hover{
    background-color: darkorange;
    transform: scale(1.2);
}

table{
    margin: 40px 40px;
}
thead{
    background-color: #555555;
    color: white;
    font-weight: bold;
}
td, thead{
    border: 1px solid black;
    padding: 8px 15px;
}

/* CSS para nuestra pag. principal*/

.banner{
    width: 100%;
}
.principal{
    background-color: #FEFEFE;
    padding: 3em 0;
    width: 940px;
    margin: 0 auto;
}

.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p{
    margin: 0 0 1em;
}
.principal strong{
    font-weight: bold;
}
.principal strong{
    font-style: italic;
}
.utensilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}
.mapa{
    padding: 3em 0;
    background: linear-gradient(#FEFEFE,#888888)
}
.mapa p{
    margin: 0 0 2em;
    text-align: center;
}
.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}
.diferenciales{
    padding: 3em 0;
    background-color:#888888 ;
}
.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;
}
.lista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}
.items{
    line-height: 1.5;
}
.items::before{
    content:"★";
}
.items:first-child{
    font-weight: bold;
}
.imagen-diferenciales{
    width: 60%;
    box-shadow: 10px 10px 30px 15px #000000;
}
.imagen-diferenciales:hover{
    opacity: 30%;
    transition: 400ms;
}
.video{
    width: 560px;
    margin: 1em auto;
}

@media(max-width: 480px){
    h1{
        text-align: center;
    }
    nav{
        position:static;
    }
    .caja, .principal,.mapa , .contenido-diferenciales, .video {
        width: auto;
    }
    .lista-diferenciales, .imagen-diferenciales{
        width: 100%;
    }
}
2 respuestas

Revisa que tengas esta lineas el el head de tu HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En la parte del media te falta el screen y el "and"

@media screen and (max-width:480px)