Image header not sized properly on mobile device

  • Profile Image
    AGENCELIEUXDITS
    Asked on November 28, 2017 at 10:11 AM
    There is a HUGE display issue on mobile devices. Please see files here attached. Mobile version disproportionate and uneven when compared to the desktop version (the latter being perfect).
  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 10:17 AM

    Please note that the issue here is not only the image Header not sized properly on mobile device. I invite you to look closely at the other picture, other parts of the form are problematic too.

  • Profile Image
    Richie_P
    Answered on November 28, 2017 at 10:17 AM

    Hi,

    I have checked your form and If I understood you correctly, your header image is off with the mobile device view.

    You can fix that issue by using custom css

    Here is that css code to fix the issue: Using "@media (max-width:480px) the smallest mobile view" just place this to your css.

    @media (max-width:480px){
      div.form-all:before{
        background-size: 300px 130px;
      }
    }

    I hope this information helps you.

    Best Regards.

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 10:22 AM

    Have you checked the result: a disproportionate logo?


    Have you looked at other elements on our form?


    Your solution doesn't solve much here.


    Please advise.

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 10:31 AM

    And again, we thought JotForm platform was more "intuitive" / user friendly, by automatically transforming/adapting the desktop version to the mobile one.


    Now, if I have to hire a programmer to do some css coding, we're moving far away from JotForm so-called user friendly proposal/offer.

  • Profile Image
    Kiran
    Answered on November 28, 2017 at 12:23 PM

    I am looking into this issue. Please allow me some time to check this and get back to you later. 

    Thank you for your patience. 

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 12:36 PM

    Thank you, I appreciate your help.

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 05:33 PM

    Good evening,


    How much more time will it take JotForm to find a definitive solution for the major issues we're having with the mobile version of our form?


    As stated earlier today, please advise quickly, we're late on our agenda, and consequently losing sales AND money.


    Please see preview here: https://www.jotform.com/build/73297473631261#preview

  • Profile Image
    Kiran
    Answered on November 28, 2017 at 06:50 PM

    Thank you for your patience. Please inject the following CSS code to the form to display the header image responsive on mobile devices.

    .form-all:before {

        background-size: 100%;

    }

    The other elements on the form seem to be displaying normally at my end. If you can let us know the issue with any specific field, we can assist you further.

    Thanks!

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 08:41 PM

    Is there a place in particular to insert that code, but I just did it and it doesn't work.

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 08:46 PM

    works for the header pic, but not for the second one that is rediculously small...

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 09:05 PM

    Also! I change the logo size but it keep leaving to stretched from one side the other of the form and it's even cut on its height. Why is that?

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 09:07 PM

    Oh I just realized that it's the coding you told me to insert that does that to the logo....then what it the solution? All pictures need to be responsive.

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 28, 2017 at 09:08 PM

    Last thing. Where in the settings can I set a confirmation email to be sent to the user? I made a test and I haven't received any....it's very important.
  • Profile Image
    Kiran
    Answered on November 28, 2017 at 10:35 PM

    Please add the following code also to the form in order to display the second image correctly and the adjust the width of the form on the mobile devices.

    @media screen and (min-width: 10px) and (max-width: 540px){

    .form-all {

      width: 100% !important;

    }

    .form-header-group.hasImage>.header-logo {

        display: table-header-group;

    }

    }

    This is how the form should be displayed after injecting the code above.

    1511926453bs_realdroid_Mobile_Samsung Ga

    The other issue related to the autoresponder email is moved to a separate browser and shall be answered there shortly.

    https://www.jotform.com/answers/1309518

    Thank you!

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 29, 2017 at 06:36 AM

    Good morning,


    It seems like the solutions you previously suggested to fix the mobile version layout dismantles/undoes the desktop version layout.


    One version seems totally dependant of the other.


    So far, on our side, we have invested close to 25 hours trying to come up with functional/approporiate versions, desktop and mobile.


    Vainly.


    Again, we're VERY late on our agenda, and consequently losing sales AND money.


    If JotForm cannot come up TODAY with a final solution, we'll move towards a competitor's platform.



    Thank you.

  • Profile Image
    Kiran
    Answered on November 29, 2017 at 08:28 AM

    I have checked your JotForm and see that the provided CSS code has not been added to the form. I have now added the code to your JotForm and see that the form is displaying correctly on mobile devices. Please check and let us know if you need any further assistance.

    Thanks!

  • Profile Image
    AGENCELIEUXDITS
    Answered on November 29, 2017 at 08:38 AM

    Thanks a million times. Pefect now.