Thankyou Page Layout Question

  • Profile Image
    markashton
    Asked on May 07, 2012 at 12:52 PM

    Hi,

    Excuse me on this, I'm trying to center a div on the following Thankyou page. I'm not having too much luck.

    I think I must be missing something. I'd be very grateful if some one could point me in the right direction to get the content centred on the page. Thanks

    Code is here:

     

    <div style="background-color: #666; text-align: center;">

    <div style="background-color: #fff; margin: -8px; border: 0; width: 320px; height: 400px; text-align: center; font-family: verdana, geneva; font-size: small; color: #000;">

    <div><img src="//www.jotform.com/uploads/markashton/form_files/Logo_header_demodental.png" alt="" /></div>

    <div><span style="font-weight: bold;"><br /></span></div>

    <div><strong>Many Thanks</strong></div>

    <div><img src="//www.mazeguy.net/bigsmilies/kiss.gif" alt="" /></div>

    <div><span style="font-size: small;">&nbsp;<br /><span style="font-family: Verdana, Arial, Helvetica, sans-serif;">{friendsFirst}&nbsp;</span>has been sent<br />a referral voucher</span>&nbsp;</div>

    <div><br /><a style="color: #000;" target="_blank" href="http://www.jotform.com/markashton/template?yourFull={yourFull}&amp;yourEmail={yourEmail32}" >Click here<br />To refer another friend<br />with your details pre-filled</a><br /><br /><br /><br /><br /></div>

    </div>

    </div>

     

    Thanks a lot

  • Profile Image
    pinoytech
    Answered on May 07, 2012 at 01:21 PM

    Hi,

    You can use this HTML code and let us know if its perfectly centered.

    <div style="background-color: #666; text-align: center;">

    <div style="background-color: #fff; margin-left: 170px; border: 0; width: 320px; height: 400px; text-align: center; font-family: verdana, geneva; font-size: small; color: #000;">

    <div><img src="//www.jotform.com/uploads/markashton/form_files/Logo_header_demodental.png" alt="" /></div>

    <div><span style="font-weight: bold;"><br /></span></div>

    <div><strong>Many Thanks</strong></div>

    <div><img src="//www.mazeguy.net/bigsmilies/kiss.gif" alt="" /></div>

    <div><span style="font-size: small;">&nbsp;<br /><span style="font-family: Verdana, Arial, Helvetica, sans-serif;">{friendsFirst}&nbsp;</span>has been sent<br />a referral voucher</span>&nbsp;</div>

    <div><br /><a style="color: #000;" target="_blank" href="http://www.jotform.com/markashton/template?yourFull={yourFull}&amp;yourEmail={yourEmail32}" >Click here<br />To refer another friend<br />with your details pre-filled</a><br /><br /><br /><br /><br /></div>

    </div>

    </div>

    If you need futher assistance, feel free to contact us again anytime.

    Thank you for using JotForm!

  • Profile Image
    markashton
    Answered on May 07, 2012 at 01:29 PM

    Hi,

    The only difference is that you have changed the margin: -8px; to margin-left: 170px;

    That would just give it a 170px left margin ?

    I tried it out and that is exactly what happened - not centred just 170px in from the left. Did you try this out in a browser before posting it?

    What was your thinking with regard to this amend? I'd be very grateful to know.

    Thanks, Regards Mark

  • Profile Image
    pinoytech
    Answered on May 07, 2012 at 01:40 PM

    I am sorry for that. Can you please change:

    <div style="background-color: #fff; margin-left: 170px; border: 0; width: 320px; height: 400px; text-align: center; font-family: verdana, geneva; font-size: small; color: #000;">

    to

    <div style="background-color: #fff; margin-left: auto; margin-right: auto; border: 0; width: 320px; height: 400px; text-align: center; font-family: verdana, geneva; font-size: small; color: #000;">

    Thank you!

  • Profile Image
    IsabellaLo
    Answered on February 25, 2013 at 04:30 AM

    Hallo,

    How can I change the page width for the Thank You page? I can adjust the width for the form itself but when it comes to the Thank You page, it just occupied the whole screen width by default.

    Please help :-)

    BR, Isabella

  • Profile Image
    EltonCris
    Answered on February 25, 2013 at 07:48 AM

    Hi Isabella,

    Simply use "Tables". Just insert a table to your form and set its row/column/width settings like this.

    Let us know if you have further questions. Thanks!