How can I position the form in respect of the background image?

Hi there supporters, maybe you've received lots of questions like this one, but I've been checking in the forum and I could not find the exact solution or answer.

This is the form I want help with

http://form.jotformpro.com/form/42664624775969

There is a background image with a smartphone in the center. I would like to position the form so it looks like the form is in the white zone of the smartphone's screen. I guess it has to be done injecting CSS codes, but I cannot find which CSS codes are the right ones.

Thanks in advance!

Hello Carlos.

Yes, you can achieve that by injecting the following small bit of custom CSS:

.form-all {
    width: 393px;
    margin-top: 75px;
}

Here is a guide on injecting custom CSS to your form.

You can also open the Designer, and paste your CSS code in the textarea under the CSS tab of the Designer.

This is what it would look like on a desktop:

However, please note that there might be some problems with getting it perfectly aligned in some screen resolutions, and it may look especially non-aligned on small screen sizes, tablets and smart phones.

It is possible to use @media queries in the CSS to limit this positioning to only screen sizes that display it properly.

Please test out if this is what you are trying to achieve, and let us know.

Kind regards.

Great Boris, it is exactly what I needed

I will take the risk with the screen resolutions, if I do not try I will never know ;-)

However, I'm surpised it is also needed to insert the CSS code for width... I thought it was set up with the option "Form Width" of menu "Form Layout" in the Designer

Anyway, thanks a lot!

You are welcome, I'm very glad to have helped.

When it comes to using custom CSS for width, it is not required. I just wanted to keep this entire tweak as short and as contained as possible, so that you can easily remove everything in one go if you do not like how it turns out.

Also, as the form's width is closely related to the positioning it into the background image of a phone, I thought it makes more sense to do both positioning tweaks in one short bit of code.

I hope my explanation was clear.

Thank you for using JotForm, please ask if you need further help in setting up your form, we are here to help.