CODEWITHSUNDEEP
cssmodal-dialog
raaj
raaj

Reputation: 3291

Modal on mobile ugly

Good Day,

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.

Upvotes: 0

Views: 383

Answers (1)

Passerby
Passerby

Reputation: 10070

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

1) Use media query

Live demo

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

622px is the result of 560px/0.9;

2) Use percentage and max- CSS attributes

Live demo

<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 value;

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 with JS).

Upvotes: 1

Related Questions