Modal: Make popup window responsive

  • losdbenefits
    Asked on February 23, 2018 at 2: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...

    Jotform Thread 1395225 Screenshot
  • aubreybourke
    Replied on February 23, 2018 at 3: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 Screenshot 10

  • losdbenefits
    Replied 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!


  • Adrian
    Replied on February 26, 2018 at 1: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