Mobile Responsive Widget + media query CSS causes the layout to not be responsive when viewed in ipad portrait mode

Hi,

I have my form embedded in a wordpress website using jquery script.

Here's the link.

http://salutecolorado.org/application/

I have used the mobile responsive widget and in addition have the following media query:

/*media queries*/

@media only screen and (max-width: 40em){

.progressBarContainer {

position: initial;

bottom: initial;

}

}

The progress bar is initially at the bottom and the media query moves the progress bar to the top for devices with max-width:40em.

It works fine, except that when I view the form in ipad portrait mode, the layout is not being responsive and the form extends out.

Not sure what's going on. I really need this fixed ASAP as we need to launch the website.

Also, please DO NOT add any code to my form css or remove any widgets(it was done once before by a support personnel).

I would appreciate it if you would just tell me what to do and I will make the necessary changes.

Thank you for your help.

Hi,

Also, please DO NOT add any code to my form css or remove any widgets(it was done once before by a support personnel).

I would appreciate it if you would just tell me what to do and I will make the necessary changes.

I am sorry to hear that, we usually do not make any changes to the users jotforms without consent or if the users themselves were not able to do the same. Having said that I will try to help you with few comments.

The progress bar is initially at the bottom and the media query moves the progress bar to the top for devices with max-width:40em.

I would actually not recommend 40em to be used. The sole reason is that em is the font size so 1em is the 100% of the font size on the page, so 40 would be 40*size of the font. Now while that might be working for you when you assign the value on that specific device, on slight change of the font size it will cause the 40em to change its value as well.

Now what I would suggest is changing that into max-device-width:800px like so

@media only screen and (device-width: 768px)
{
.progressBarContainer
 {
   position: initial;
   bottom: initial;
 }
}

Now you should test it out.

If you would like to make certain changes to the iPad portrait mode only (since all others seem to work for you and you do not want to change them), then you can apply this media query

@media screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)
{
  .progressBarContainer
  {
    position:fixed;
    top:0;
  }
}

Do let us know if any of the two work the way you wanted, unfortunately I do not have iPad to test it out.

Best Regards,
Ben

Hi Ben,

Thank you for your reply.

Actually, the problem in the portrait mode is not with the progress bar. Progress bar works the way I want it to.

The actual problem in the portrait mode is the form layout. The form is wider and extends beyond the screen. It looks like its not following the rule,

.form-all{

max-width:100%;

}

Its almost as if it lost its padding! if that makes sense.

Thanks again.

Tried the above code, no luck.