Envelope part of the form's background image not displayed correctly on mobile

Hi:

When viewing our contact form on an iPhone it should look like this:

Instead, it looks like this:

Please advise.

Paul

Hi Paul,

Thanks for reaching out to us for help. I cloned your form and I can easily replicate the issue. We can use Custom CSS code to align the envelope image properly. Let me walk you through it:

1. First, copy this code:

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

    .supernova .form-all, .form-all{

    width: 320px !important;

   }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my result:

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

Still doesn't work. (See screen shot below.) This is after pasting your code in the proper area.

Hi Paul,

Can you check with an actual mobile device? If it still doesn't work, you can replace the code with the one below:

@media (max-width: 480px) {

    .supernova .form-all, .form-all{

    width: 320px !important;

   }

}

@media (max-width: 370px) {

    .supernova .form-all, .form-all{

    width: 290px !important;



}

}

Give it a try and let us know how it goes.

I just check my phone and it shows something different. It's partially working, however, if you notice, the envelope is not centered to the paper. (see below) By the way, the pic above is what you see when view the Phone mode in Jotform.

Pasted your new code and now, besides the envelope not centered to the letter, there is now a partial white box behind the artwork and blocking some of the green background, However, some of the background shows below the white box.

Hi Paul,

I see we're making progress. Can you replace the code again, with the one below:

@media (max-width: 480px) {

    .supernova .form-all, .form-all{

    width: 290px !important;

   }

   

   .form-section.page-section:before, .form-all:after, #stage div.formPage-each:last-child .form-all:after, .form-all > .form-section:after {

    left: -60px !important;

   }

}



@media (max-width: 400px){

   .form-section.page-section:before, .form-all:after, #stage div.formPage-each:last-child .form-all:after, .form-all > .form-section:after {

    left: -40px !important;

   }

}

Check out my result, I tested it with Safari browser as well:

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

It looks better on my phone. No white box, however, the white paper looks tighter and you could judge it by the envelope. Also the envelope seems distorted, also tighter. Could it be that something in the code needs adjusting? Compare the top pic with the pic below.

Hi Paul,

Are you referring to the form itself? Do you want it to fit the screen, when accessed using mobile? Doing that will cover up the top right & left open side of the envelope. If you're referring to something else, let us us know and provide more details and I'll look into it.

As for the envelope, do you want the form more enclosed by the envelope? Can you replace the code again with the set of codes below:

@media (max-width: 480px) {

  .form-section:before, .form-all:after {

    border-width: 120px 200px !important;

  }

  .supernova .form-all, .form-all{

  width: 350px !important;

  }

  

  .form-section.page-section:before, .form-all:after, #stage div.formPage-each:last-child .form-all:after, .form-all > .form-section:after {

  left: -27px !important;

  }

}



@media (max-width: 400px){

  .form-section:before, .form-all:after {

    border-width: 120px 180px !important;

  }

  .supernova .form-all, .form-all{

  width: 330px !important;

  }

  .form-section.page-section:before, .form-all:after, #stage div.formPage-each:last-child .form-all:after, .form-all > .form-section:after {

  left: -18px !important;

  }

  .form-all > .form-section:after {

    width: 360px;

  }

}

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

The pic below is what your code originally looked like when you posted it many reply's ago (Replied on September 13, 2025 at 12:44 AM), however, when I viewed in on my iPhone 15, it didn't look the same. This is why we are at this point.

But I must say, you know your coding!!!!

I'm going to add the coding above and will let you know what it looks like.

WOW! WOW! WOW! You hit the bull's-eye!

It looks perfect on my iPhone, however there is a problem, not with your code, or how it looks on my phone. The problem is when you select the "Phone Mode" (see pic below) when trying to see if it's going to look correctly on a phone. Very bad representation. They really need to fix that. The other two modes are fine.

Thank you so much Lorenz for working at it to the end. I hate it when it's handed over to someone else and they screw everything up. Like I said before to another Support agent: "It's like having a lot chefs in the kitchen cooking on one dish at the same time." Can you imagine what it would eventually taste like?

Hi Paul,

I certainly understand what you mean. I'm also glad the code I provided worked perfectly for you. As for the issue with the phone mode, while that emulator in form builder helps previewing how the form might look like on different devices, they don't always perfectly replicate real-word browser differences, or complex Javascript interactions that can affect performance and design. It's crucial to always perform actual testing on physical devices to get true understanding of the form's responsiveness.

Let us know if you have any other question.

I agree whole hardheartedly!

Thank you again. I wish I had you on my team!

God bless you!

Paul Marin

I meant... wholeheartedly! LOL Hahahaha