Modal: Make popup window responsive

  • Profile Image
    losdbenefits
    Asked on February 23, 2018 at 02:31 PM

    Hi,

    I found some html code to initiate a popup window that opens when people first go to the form with instructions.  I'm finding the popup isn't formatting for phones...the popup is too big.  It works great on the computer version. 

    I'm not too proficient with HTML so I was wondering if you could give me some pointers on how to adjust the width for phone views?

    And also when I went back one revision, it got rid of all my formatting that I previously had yesterday.  The formatting went all the way back a month or so when I started working on the form...

  • Profile Image
    aubreybourke
    Answered on February 23, 2018 at 03:38 PM

    Add this CSS code to the end of what you already have:

    @media only screen and (max-width: 400px) {
        .modalBox > div
        {
        width: 210px !important;
        }
        .modalBox{
        overflow: scroll !important;
        }
        .supernova{
          overflow: hidden !important;
        }
    }

    It should look like this on mobile screens:

    15194182800o446.png

  • Profile Image
    losdbenefits
    Answered on February 26, 2018 at 12:29 PM

    perfect!  Thanks so much.


    Also have a question...when I revert back to a previous version of the form, ie earlier in the day if I've made some changes, I lose all of my original formatting and it goes back to the beginning when I first setup the form.  When I first created the form, I had put in an image and then as the form morphed I changed the image to just a color background.  That was over a month ago.  When I was playing with the code for the popup window, I tried reverting back to earlier in the day and when I did I got the old formatting from a month ago.  I've since fixed it again, but this seems to be a recurring problem when I revert.


    Thanks!


  • Profile Image
    Adrian
    Answered on February 26, 2018 at 01:58 PM

    Also have a question...when I revert back to a previous version of the form, ie earlier in the day if I've made some changes, I lose all of my original formatting and it goes back to the beginning when I first setup the form.  When I first created the form, I had put in an image and then as the form morphed I changed the image to just a color background.  That was over a month ago.  When I was playing with the code for the popup window, I tried reverting back to earlier in the day and when I did I got the old formatting from a month ago.  I've since fixed it again, but this seems to be a recurring problem when I revert.

    Since this question is not related to the original thread, I have moved it to a new thread and will answer there shortly.

    New Thread: https://www.jotform.com/answers/1397364