CODEWITHSUNDEEP
javascripthtmlcssmobile
raphael_turtle
raphael_turtle

Reputation: 7314

Modal not positioned correctly on mobile

I'm using ratchet to make a html mobile site. I've been using chromes device mode to test the app and the modal works as expected, it slides down and only covers half the screen but on ios and android it doesn't stay anchored to the top but slides on down to the middle.

the code is:

.modal.active {
    height: 50%;
    opacity: 1;
    -webkit-transition: -webkit-transform .25s;
    -moz-transition: -moz-transform .25s;
    transition: transform .25s;
    -webkit-transform: translate3d(0,50%,0);
    -ms-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

.modal {
    position: fixed;
    top: 0;
    z-index: 11;
    width: 100%;
    min-height: 50%;
    overflow: hidden;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: -webkit-transform .25s,opacity 1ms .25s;
    -moz-transition: -moz-transform .25s,opacity 1ms .25s;
    transition: transform .25s,opacity 1ms .25s;
    -webkit-transform: translate3d(0,-100%,0);
    -ms-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

Can you see anything here that would make it act differently on a mobile?

Upvotes: 1

Views: 70

Answers (1)

Shehary
Shehary

Reputation: 9992

Possible solution, use media queries to adjust the modal margin from top according to screen size

e.g

@media screen and (max-width: 480px) {   
    .modal.active {
        height: 50%;
        opacity: 1;
        -webkit-transition: -webkit-transform .25s;
        -moz-transition: -moz-transform .25s;
        transition: transform .25s;
        -webkit-transform: translate3d(0,20%,0);
        -ms-transform: translate3d(0,20%,0);
        transform: translate3d(0,20%,0);
    }
}

See in Action

Upvotes: 1

Related Questions