How can I make the pop-up the right size to fit on a Mobile Screen?

  • Profile Image
    juliacarere
    Asked on July 18, 2017 at 03:48 PM

    How can I make the pop-up the right size to fit on a Mobile Screen?



    This is a re-post of a comment on How to Add a Pop-Up Modal on your Form

  • Profile Image
    BDAVID
    Answered on July 18, 2017 at 04:43 PM

    What mobile device are you using? The pop-up modal fits correctly in mobile views:

  • Profile Image
    juliacarere
    Answered on July 18, 2017 at 04:48 PM

    The text I used was much longer and the X button ended up off screen, and it wasn't able to scroll to the bottom or to the right to click the X. I figured out both issues after doing some digging:

    I changed the width to: 

    width: 250px;

    I added this: 

    position: fixed;

    overflow-y:scroll;

    overflow-x:scroll;

    It would be nice if the width could be 400px on desktop and 250px on mobile, but I'm not sure how to do that.

  • Profile Image
    BDAVID
    Answered on July 18, 2017 at 05:47 PM

    Leave the original code to 400px, then copy it, and change the copied version to 200px, and paste the copied version between this mobile query: 

    @media only screen and (max-width: 480px) {

    Your code here...

    }