How can I reduce the gap between the header and the form on mobile view

Hi,

I want to reduce the gap between the header and the beginning of the form. The desktop view is okay but the mobile phone view is not okay. I have injected custom CSS to maintain the header height so that it will not be stretched. Please refer to the attached picture showing the gap between the header and the first field is too big.

Hello! Please check this form on your mobile device: https://form.jotform.com/211782418506961

If this solves your purpose, then you can implement the following CSS code to achieve this:

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

 .form-all{

  margin-top: 0px !important;

 }

  

 div.formLogoWrapper.Left{

  position: static;

  border-bottom: 7px solid #ECEDF3;

 }

  

 div.formLogoWrapper.Left > img.formLogoImg{

  display: block;

 }

}

Make sure that you place this code at the end of your existing CSS code.

In case this doesn't solve your purpose or if you have any questions, let us know.

Thank you!

Thank you Patrick. That solved the gap perfectly. By the way, how do I reduce the gap between the field in mobile view? The gap between the field for tablet and desktop view is okay but for mobile view, the gap seems bigger.

Thank you.

Hi there,

Kindly please add this code into your form.

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

li.form-line {



margin-bottom: -14px;

}

}

I hope this helps. Let us know if you need any further assistance.

Thank you, Lorenz. It works.