Form background is zoomed in on mobile

Two issues are occurring:

On the desktop version, the background image remains fixed in one spot and doesn't scroll down with the form.

On the mobile version, the background image appears completely zoomed in and doesn't display as intended.

Hi Elizabeth,

Thanks for reaching out to Jotform Support. When I cloned and tested your form, everything worked the way it was supposed to. Take a look at the screenshot below to see my results:

I cleared your form's cache which should help. Can you go ahead and try it again and let us know how it goes? If the same thing happens again, please let us know the type of device and browser you're using and we'll investigate it more to see if we can figure out what's going on.

Give it a try and let us know if you need any help.

I tried it again! I’m using an iPhone 14. When I preview it from jotform it looks great. But when I click the link through my phone it zooms in again.

Hi Elizabeth,

Please replace your form's existing CSS codes with a new one. Let me walk you through it:

1.First, copy the codes below:

/* fix bg in mobile ios - 18582301*/



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

  body {

   position: relative;

 }

  

  .form-all {

   position: absolute;

   height: 100vh;

   width: 100vw;

   top: 0;

   overflow: scroll;

   margin-top: 0;

 }

}

/* Ends here */

2.In Form Builder, click on the Paint Roller icon on the right.

3. Under the Styles tab, paste the codes, replacing the existing ones, into the Inject Custom CSS box.

Here's how it would appear:

Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know if you need any help.

This looks great!! Thank you so much.

And what about the desktop version? I'ts not showing the whole picture just a portion of it.

Hi Elizabeth,

Please update the codes with the following:

/* fix bg in mobile ios - 18582301*/



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

 body {

  position: relative;

 }

.supernova {

  background-attachment: fixed !important;

}

 .form-all {

  position: absolute;

  height: 100vh;

  width: 100vw;

  top: 0;

  overflow: scroll;

  margin-top: 0;

 }

}

.supernova {

 background-repeat: no-repeat;

 background-attachment: unset;



}

Note that the background on the desktop may appear zoomed in as the background tries to stretch it to the length of your form.

Reach out again if you need any help.

Should I delete the previous Code that you sent before or just add this one as well>?

Hi Elizabeth,

This replaces the existing codes in your form. You can also test it on this link.

Reach out again if you have any questions.

Hi Elizabeth,

To avoid confusion, I answered your other question on a new thread. You can go ahead and check that out here. 

Reach out again if you need any help.