0

He declarado una class llamada #inner en CSS para aplicar a un determinado div que posee la propiedad width: 50%; pero quisiera que al visualizarlo en un dispositivo móvil la propiedad width fuese del 100% width: 100%;

He pensado en hacerlo de la siguiente forma, pero lo he probado en mi smartphone y no funciona:

#inner {
    width: 50%;
    margin: 0 auto;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    }

@media screen and (max-width: 480px){
    #inner{
        width: 100%;
    }
}

¿Cómo podría hacer que funcione?

2
  • 1
    Hola pedro,si hablas de definir una clase recuerda que estas en CSS se toman con .(punto) el # es para los id. y si quieres un sitio responsive te recomiendo usar BOOTSTRAP es sencillo y mucho mejor
    – Michael
    Commented el 28 dic. 2017 a las 13:40
  • @Pedro ya solucionaste tu problema?
    – zerokira
    Commented el 28 dic. 2017 a las 13:47

2 respuestas 2

3

Asegurate que en tu HTML cuentes con el meta-viewport, y un consejo al momento de alterar el width al 100%, con el padding que le estas dando el div generara scroll horizontal por lo cual con calc al 100% de la pagina le restaras 80px que seria la suma de los 40px a cada lado del div que le das con el padding.

#inner {
    margin: 0 auto;
    padding: 0 20px;
    width: 50%;
    background: black;
    border-radius: 10px;
    padding: 40px;
    }



@media screen and (max-width: 480px) {
  #inner {
    width: calc(100% - 80px);
  }
}
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<div id="inner"></div>

2

Lo que hiciste no está mal pero es posible que la resolución de tu smartphone sea más grande que la que declaraste en el media query, por ende no se aplica el width: 100%. La mejor opción es hacer, lo que se denomina como, mobile first que quiere decir que primero se maqueta en mobile y después se agrega los media query para tablet y por último desktop.

#inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
}

@media screen and (min-width: 480px) {
    #inner{
        width: 50%;
    }
}

@media screen and (min-width: 780px) {
    #inner{
        width: 33%;
    }
}

Otra cosa que deberías saber es que las clases son atributos class y se llaman desde el css con un "punto", por ejemplo .inner {} y los id con el hashtag.

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.