Modal en móvil feo

Buenos días,

I have my .modal CSS code as such

.modal
{
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
     border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}

However, it looks like this on mobile

enter image description here

I need a way for the modal to resize.

preguntado el 27 de noviembre de 13 a las 06:11

you have a fixed width in your modal's css. consider media queries to set an appropriate width depending on the screen width of the devie -

Or alternatively use a %-based width and set a max-width so it doesn't get too big on desktop screens. E.g. width: 90%; max-width:560px; -

An example of media query as msturdy mentioned: jsfiddle.net/upNn9 -

1 Respuestas

I've come up with two ways to archive this:

1) Uso consulta de medios

Demo en vivo

.modal {
/* original code */
}
@media (max-width:622px) {
    .modal {
        left:5%;
        margin-left:0px;
        width:90%;
    }
}

622px es el resultado de 560px/0.9;

2) Use percentage and max- Atributos CSS

Demo en vivo

<div class="modal-wrapper"><div class="modal">Some text</div></div>

.modal-wrapper {
    position:fixed;
    top:10%;
    left:50%;
    width:560px;
    max-width:90%;
    overflow:visible;
    z-index:1050;
}
.modal {
    position: relative;
    width: 100%;
    margin-left:-50%;
    /* background colors and stuffs */
}

Method 1 makes least change to your code, but if you ever change your mind about the 560px limit, you'll also have to take care of the media query max-width valor;

Method 2 makes quite some change to your code, but if you ever change your mind about the 560px limit, you should be able to change it fast (even con JS).

respondido 27 nov., 13:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.