Modal windows for mobile devices

I wonder how do you people present modal windows on mobile viewports for a responsive website?

I usually make the modal window on mobile to occupy 100% of the viewport width and only leave some semi-transparent background on top and bottom, only to visually hint that it is a temporary state. But I also wanted to hear your opinions.

I try to leave plenty of space around the modal, and most importantly make the close button tap target large enough to click with big fingers!

Yeah, but what I find in some modal windows are that they are really content heavy, and in order to maximize readability, more width is needed. I assume in your situation, your modals are simpler.

I guess you would try to make all a one column layout inside the modal for small mobile devices.

I meant leaving enough space for the close button not to half disappear off screen :slight_smile: In reality a margin of 1em/16px is more than enough which give plenty of space for the modal + content.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.