Adaptar código CSS para div de ancho responsive

publicado por: Anonymous

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?

solución

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.

_x000D_

_x000D_

#inner {_x000D_
    margin: 0 auto;_x000D_
    padding: 0 20px;_x000D_
    width: 50%;_x000D_
    background: black;_x000D_
    border-radius: 10px;_x000D_
    padding: 40px;_x000D_
    }_x000D_
_x000D_
_x000D_
_x000D_
@media screen and (max-width: 480px) {_x000D_
  #inner {_x000D_
    width: calc(100% - 80px);_x000D_
  }_x000D_
}

_x000D_

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">_x000D_
_x000D_
<div id="inner"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *