Form not displaying correctly on Ipad

  • Profile Image
    Martinellis4
    Asked on September 23, 2015 at 05:04 PM

    My form seems to change format when viewed on an ipad.  Can you tell me why?

    I have attached the ipad screenshot.

     

    Thanks

  • Profile Image
    Chriistian
    Answered on September 23, 2015 at 10:48 PM

    Hi,

     

    Your browser seem to change the format of the form. Have you tried using different browser? Do you still want the same styling applied as when viewed on desktop?

     

    We will wait for your response.

    Regards.

     

  • Profile Image
    Martinellis4
    Answered on September 24, 2015 at 02:21 AM

    Yes I would like the iPad to display as it looks on the laptop.

    Thanks

  • Profile Image
    Chriistian
    Answered on September 24, 2015 at 03:42 AM

    Hi,

     

    I'm currently testing my cloned form with the custom CSS to be applied to fix it's ipad view. Please give me more time. I'll get back to you as soon as get this working.

     

  • Profile Image
    Chriistian
    Answered on September 24, 2015 at 03:54 AM

    Hi,

     

    Can you try to inject the custom CSS below and see if it fix the styling?

    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

    #cid_10 {

    white-space: nowrap;

    }

    .form-sub-label-container {

    width: initial;

    }}

     

    To inject your custom CSS, there is a guide: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.

    Regards.

  • Profile Image
    Martinellis4
    Answered on September 24, 2015 at 08:22 AM

    Hi

    That seems better but the fields still spread across the whole page?

    how do I fix that? 

    Tm

     

  • Profile Image
    KadeJM
    Answered on September 24, 2015 at 12:08 PM

    Are you referring to the inputs for each of the fields with those stretched out the width of the screen on your device?

    This? -

     

    If I'm not mistaken I think you said you wanted that to look like the computer version instead? Or?

     

    Please confirm or correct me so that we can better assist you or let us know more about how you are needing it to look.

  • Profile Image
    Martinellis4
    Answered on September 24, 2015 at 04:01 PM

    I would like the form to be published as it looks in your bottom picture with the smaller boxes. 

    Thanjs 

  • Profile Image
    Mike
    Answered on September 24, 2015 at 06:04 PM

    We have also added the next CSS to your form in order fix the layout.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    input[type=text], input[type=email], input[type=tel], textarea {
    width: initial !important;
    }

    The form should look similar on the iPad and desktop now. If you need any further assistance, please let us know.