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

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.

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.

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!

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:

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:

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

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

Thanks Gaetan,

Still doesn't seem to be having any impact.

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:

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

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:

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

Thank you again for your patience!

Katherine,

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

Thanks for helping correct this. Appreciate it.