Mobile version is suddenly skewed

Hi 

I'm having an issue with one of my forms "Clone of Google ads landing page" found here https://form.jotformeu.com/51184291769363

 

The mobile version used to laid out pretty much identically to the desktop version, which worked great for me

But now (I'm assuming after some sort of update) the mobile version is skewed with text appearing in the wrong areas and the button veering off to the left.

I have attached a screenshot

I would prefer the mobile version to go back to appearing the same is desktop

Any help you can provide would be much appreciated

 

Regards

 

Andrew 

 

This is how your form would look like on an iPhone 6s+, iOS 9

after you have added the CSS codes below to you form.

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown,.form-submit-button{

    display: inline !important;

    width: 90% !important;

}

.form-sub-label-container {

    display: inline !important;

}

textarea{

    background-color : white !important;

    border : 0.125em solid transparent;

    height : 2.6em;

    -webkit-transition : all 0.5s ease;

    -moz-transition : all 0.5s ease;

    -o-transition : all 0.5s ease;

    transition : all 0.5s ease;

    font-family : Arial, Helvetica, sans-serif;

    margin-bottom : 1.5em;

    line-height : 1.3 !important;

}

textarea:focus {

    border-color : #f4d31e;

    box-shadow : inset 0 0 1em rgba(244,211,30,0.5);

    height : 7em;

    -webkit-transition : all 0.5s ease;

    -moz-transition : all 0.5s ease;

    -o-transition : all 0.5s ease;

    transition : all 0.5s ease;

}

.form-submit-button {

    margin: 1em 0 1em 0em !important;

}

.form-sub-label{

    margin-left: 2em !important;

}

}

Here's how you can add custom CSS codes to your form: How-to-Inject-Custom-CSS-Codes

Please note that the codes were added and tested on a stand-alone(not embedded on a website) clone version of your form.

Can you, by the way, give us the link to your website where your form is embedded?

Here's the clone version of your form: https://form.jotform.com/61192444027956

I hope this helps. If not, please feel free to get back to us so we can further assist you. Thank you.

Hi 

Thanks very much

This has done the trick... Almost :)

There is one small problem occurring though

Now on mobile and desktop when I add the form to this page http://pack.standout-cv.com/pro-cv-writing-service 

 

The button appears slightly to the left of the form fields

 

If you could show me how to align the button with the fields, I would be hugely grateful!

 

Thanks

Andrew

I have checked the website you have included in your last reply, however, it says,

So I am not able to check how your form looks like on my end.

Anyway, I believe I know what went wrong. Since I don't know where your form is embedded earlier, I've just put in a "margin: 1em 0 1em 0em !important;" on this part of the code I have given above:

.form-submit-button {

    margin: 1em 0 1em 0em !important;

}

Because, that seems to be perfect on my end.

Now, you can try to change that to anything that would actually match your preference.

For example: 

.form-submit-button {

    margin: 1em 0 1em 1em !important;

 

}

I hope this helps. Otherwise, please feel free to get back to us so we can further assist you. Thank you.

Hi

Sorry I made an error on the page

 

This is the page: http://pack.standout-cv.com/pro-cv-writing-service

 

Also I'm not entirely sure what you mean in terms of inserting that code (I don't know much about coding I'm afraid)

 

Is there any chance you could show exactly what I need to paste in? and where?

 

Essentially I need the button to be centred with the fields so that the edges of the button, line up with the edges of the fields

 

Many thanks!

Thank you for giving me the correct website as I was able to test it further.

Below are the exact new codes that you need to add to your form. Just follow the instructions on this guide, How-to-Inject-Custom-CSS-Codes, to learn how to.

.form-all{

width: 20.1em !important;

}

input[type="file"] {

    width: 19.1em;

}

.form-error-arrow{

left:20px !important;

}

.form-error-message{

position:relative !important;

right:-20px !important;

max-width:86% !important;

border-radius: 10px 10px !important;

height: 15px;

}

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-all{

width: 20.75em !important;

}

.form-submit-button {

    margin: 1em 0 1em 21.3906px !important;

}

}

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px) {

.form-submit-button {

    margin: 1em 0 1em 0.8em !important;

}

}

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) {

.form-submit-button {

    margin: 1em 0 1em 0.8em !important;

}

}

Above are additional codes and please do not remove the set of codes I have asked you to add on my first reply on this thread.

I hope this really fixes the issue you have. 

Let us know if you still need any further assistance. Thank you.

Thanks Mike that's perfect

 

You're a legend 

You are most welcome! 

Please feel free to contact us anytime you have questions or concern and we will be glad to help you. 

Cheers! :)