Blue Envelope Theme: Centering header widget text

Like I said, I don't mind having a header text (and you are correct - when I have a header, there is no problem) but the text in the header will not center - I have tried everything.

Hi,

I have cloned your form and set the text to be centered. You can take a look at the from here:

http://www.jotformpro.com/form/42585510163956

Now to do that we need to make few alterations. First we should remove that 'fix' on the previous thread because it will not allow us to get the proper style.

Please remove all CSS in the form style box and and then add this one instead of it:

.form-all
{
padding-top: 0;
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}
/*--red border on error--*/
.form-validation-error {
border: 1px solid #FFB0B0 !important;
}
/*---form textbox styles fixed---*/.form-textarea, .form-textbox  {
border: 1px solid #b7bbbd;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 4px;
background:transparent !important;
width:100%;
-webkit-appearance: none;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
border: 1px solid #AEAEAE;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul.form-section li.form-line:first-child {
background:url('https://shots.jotform.com/elton/images/bg_envelope_02.gif') no-repeat 0 2px;
}.form-line{
background:url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
}/*---remove error message---*/
.form-error-message {
display: none !important;
}
.form-line-error {
background: url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
}/*---submit button move--*/
.form-submit-button{
margin-top:60px;
cursor: pointer;
}.form-textarea:focus, .form-textbox:focus{
outline:none !important;
}/*--fix captcha--*/.form-captcha .form-textbox{
width:130px !important;
}
.form-line {
padding: 6px 28px 6px 30px;
width: auto;
}
.form-buttons-wrapper{
text-align:center !important;
background: url('https://shots.jotform.com/elton/images/bg_envelope_11.gif') no-repeat 32px -10px;
height: 315px;
margin: -10px -100px -8px -100px;
}
.form-button-error {
position: absolute;
top: 120px;
left: 131px;
width: 195px;
}

Just in case you need it, here is how you can inject your CSS How to Inject Custom CSS Codes. Do remember to

- first clear all CSS entries
- then click outside of the field (you will see your form in the background changing its style) and
- after that click again into the field and copy the above CSS code.

I have marked in bold the part of the code that is calling the proper theme image.

Now after you have done that you will need to enter the header back to it.

To do that, please click on the Text widget and drag it over to the JotForm

Once you drag it over, click on the Edit HTML field

Now we must click on the HTML field, because otherwise we will break the form..

Now copy this into the editor:

If you change anything other than 'Contact Us' in the above code template will be broken again. But do let us know if you do and we will adjust the settings of it properly. The settings should not be adjusted by using a different photo this time, instead it will be done by adjusting some CSS code, all depending on how you change the text.

Again, you can take a look at it in action here http://www.jotformpro.com/form/42585510163956 before you start changing code :)

Now usually if you want to justify the text in the Text widget you can do that by clicking on the align center button in the editor by clicking this button:

You can see it in the toolbar at around middle (it has orange overlay on it)

Hope this works for you.

Best Regards,
Ben

Just tried it. Works! Thanks!

Ok, but now there is a problem with viewing it on a cell phone. Look at what it looks like...

Hi,

I have checked on your website with several browsers and it seems to be working correctly. Can you please tell me the device and browser you have used when you get elements shown as you did.

Also if you can tell me the ID of the jotform that has this issue if you have changed to another jotform because of the bug.

Best Regards,
Ben

The ID is 42441679648466. I didn't change it.

The problem shows up on my Samsung S5. PC browsers are fine.

The page is

http://www.vinewoodstudios.com/contact-us.html

Hi,

OK, I see. Now I can not check this out on my Android tablet since my battery just died, but will check it out and see what might be going on.

In the mean time this seems to be the issue with specific device.

If you do not mind I would like to ask you next details:
- the version of your Android system- browser that you are using when the page is displayed like that

I will submit what you have already gave to us to our developers and they will take a look into it as well, but more details they have the easier it is for them to find and resolve the issue.

They will keep you updated on the resolution of the issue through this same ticket.

Best Regards,
Ben

Android version: 4.4.2

I don't know the browser but the same problem shows on Safari on my iphone 4.

Hi,

OK. I will add this info for our developers as well and they will let you know once this has been resolved.

Best Regards,
Ben