Can I change the size of the form on different pages?

On my first page, there is a little text but oin the second page, i work with colomns and I would like to make is larger.

So first page smal, second pages larger.

Is this possible?

GP

If you are asking about having your form wider when you navigate to page 2, yes, this is possible by using some custom CSS.

However, I'm afraid this may conflict with themes you decide to use later on, or with the color options you try to use within the Designer, because the width of the form is declared on the element that contains all your individual pages - element .form-all.

So, in order to have individual pages shown with a different width, we would first need to undo the width constraints on the .form-all element, and remove any background from it:

.form-all {
    background: none;
    width: 100%;
}

Then, we would need to set the background, width, and centering on each individual page of your form:

.form-all > .page-section {
    background: #D9CEB2;
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
}

Finally, we would set up specific different widths for those other pages, such as page two of your form:

.form-all > .page-section:nth-of-type(2) {
    max-width: 900px;
}

The number 2 marked in red denotes which page the code should apply to, and 900px tells it to be 900 pixels wide. You can add CSS codes into your form by following this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please do keep in mind that as this is customizing your form in a non-default way, there could be some styling conflicts when you use the Designer for customizing the appearance of your form later on.

Let us know should you need any further assistance, and we'll be glad to help.

Hi

And thx for your answer.

I’ve tried to enter it as you suggested but it doesn’t work.

Could you please take a look?

It only shows page 1, but doesn’t change the size of page 2

Thanks

GP

Please try to remove this part of the CSS code from page-section class:

And then try to set some fixed width for the second page:

Try to set some number, for example 600px or 700px.

Do let us know how this worked for you.

Thank you!

Hi

i tried what you suggested but it didn't work. Other suggestion?

I would like to have two colomns on the sexcond page, therefore, it needs to be bigger.

Thanks again

GP

Hello,

I've checked your account in order to understand which form do you working on for the CSS issue. As I have understood, you have mentioned about the following form of yours: http://www.jotformeu.com/form/70253342773353. Tell me if I am wrong.

If you set the page size as "1100px", the second page will be divided into 2 columns automatically as you can see the screenshot below:

However, the first page has to be 1100px as well as the following screenshot below:

Unfortunately, it is not possible to set different sizes for each page.

I have also checked your CSS codes that you have already injected to your form. I would like to inform you about that you will have problems with injecting the following CSS code into your form on the Internet Explorer: ".page-section:nth-of-type(X)"

Please consider setting whole form size as "1100px" as a solution on the form designer.

Thanks.

Hi

and thx again for the quick help.

I removed all CSS code to be sure that nothing is left behind.

I'm still learning with CSS :) but now, my first page doesn't look normal, but my second page is great .

Wath do I need to enter so my first page will be centered and ok?

Thanks again

GP

Please copy and paste the below CSS so it will center all elements in the first page:

#id_8{

margin-left:300px;

}

#id_2{

margin-left:300px;

}

#id_4{

margin-left:300px;

}

#form-pagebreak-next_28{

margin-left:300px;

}

It will look like this after applying the above CSS:

Hope this is what you had in mind.

If you need any further assistance please let us know.

Thank you!

Great!

thanks a lot!

Last question :) at the bottom, I have a calculated field.

Can I center only this field?

Thanks

GP

Hello GP,

Please inject the following custom css code in form to center align the form calculation widget:

li#id_17 {

    margin-left: 37%;

}

The following guide should help you how to inject custom css code:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Do get back to us if you need any changes.

Thank you!