How can I fix the gap between the form logo and the form itself on mobile?

  • Profile Image
    Brett_Snodgrass
    Asked on November 25, 2020 at 03:39 PM

    My form appears fine on all displays besides mobile.

    Left alone without any extra coding, the Logo image appears squished horizontally on mobile phone devices.

    1606336692_5fbec0b4cde25_SquishedImageMo

    Adding coding I found from another answered question, under STYLES and INJECT CUSTOM CSS i added this:

    @media screen and (max-width:480px){

    }

    img.formLogoImg {

     max-width: 100%;

     height: auto !important;

    }

    This seems to fix the image from being squished, but it now creates a large gap beteween the logo image and the rest of the form. I can seem to get rid of this gap now.

    1606336730_5fbec0da5c14f_GapImageMobile.

  • Profile Image
    Kat
    Answered on November 25, 2020 at 07:11 PM

    Hi there,

    Happy to help!

    You had the first part of the CSS correct in fixing your logo image, and you just need a little bit more CSS to close that gap.

    Could you please inject the following CSS into your form and let us know if this fixes the issue?

    @media screen and (max-device-width: 40em) {

    .form-all:before {

      background-position: bottom center !important;

    }

    .form-all {

      margin-top: 360px !important;

    }

    }

    You may need to tweak the max-device-width element in the first line of the CSS.

    Thank you!

  • Profile Image
    Brett_Snodgrass
    Answered on November 30, 2020 at 11:25 AM

    Katherine,

    Thank you for your response.

    This still doesn't seem to be working. Adding your CSS coding doesn't appear to change anything from the Jotform Desktop "mobile" view:

    1606753340_5fc51c3c07930_

    However, it does change it on my phone (Samsung Galaxy S10e), but not in a good way. It just cuts off the top of the image:

    1606753421_5fc51c8d6d1b1_

    I also tried changing the max-device-width element as well. After trying a few variations, it seemed to have no effect.

  • Profile Image
    Gaetan
    Answered on November 30, 2020 at 01:02 PM

    Hello Brett and thank you for your prompt reply!


    Could try to change the first line of CSS and instead of expressing it in em, express it in pixels?


    For instance:

    @media screen and (max-device-width: 400px) {

    .form-all:before {

      background-position: bottom center !important;

    }

    .form-all {

      margin-top: 360px !important;

    }

    }


    Let us know if it did better for you!


    Gaetan

  • Profile Image
    Brett_Snodgrass
    Answered on November 30, 2020 at 02:50 PM

    Thanks Gaetan,

    Still doesn't seem to be having any impact.

  • Profile Image
    Kat
    Answered on November 30, 2020 at 04:34 PM

    Hi Brett,

    Please allow me a little more time to investigate a possible solution for you in regards to this.

    In the interim, would it be suitable to remove the logo and insert it as an image on the top of the form? For example:

    1606772039_5fc56547e8fbe_brettsnodgrass.

    Thank you in advance for your patience and understanding as we find a solution.

  • Profile Image
    Kat
    Answered on November 30, 2020 at 04:39 PM

    Hi again Brett,

    Could you please try inputting the following CSS into your form?

    @media screen and (max-width: 600px){

    .form-all {

      margin-top: 0 !important;

    }

    .formLogoWrapper {

      position: initial !important;

    }

    img.formLogoImg {

     max-width: 100%;

     height: auto !important;

    }

    }

    I've tried this in a clone I made of your form and this is the result:

    1606772349_5fc5667dd20d8_

    This will also make the logo responsive across devices. Could you please try this on your original form?

    Thank you again for your patience!

  • Profile Image
    Brett_Snodgrass
    Answered on December 01, 2020 at 09:22 AM

    Katherine,

    Thank you! This seems to be working perfectly. On desktop and my phone.

    Thanks for helping correct this. Appreciate it.