Adjusting form header in mobile device

Hello, the header on my form appears fine on my laptop, but shifts when in mobile view. here is the link https://form.jotform.com/osifekogina/powering-subnational-development--- . also there seems to be some space after the header on the mobile view but it is just fine on my computer system

Hi Fisayo,

Thanks for reaching out to Jotform Support. I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi Fisayo,

To adjust the form logo for better display on mobile devices, try injecting the following CSS code. Let me show you how:

1. First, copy this code.

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

  .form-section div.form-header-group.header-large {

    margin: 0;

    padding: 0;

   	width: 395px;

   	height: 125px;

    position: relative;

    left: -38px;

    bottom: 68px;

  }

  li#cid_27 .form-input-wide {

   bottom: 20px;

  }

}

2. In Form Builder, click on the Paint Roller icon on the upper right side of the panel to open the Form Designer Menu.

3. Go to the Styles tab and add the CSS Code to the Inject Custom CSS input box. Take a look at the screenshot of the result below:

If the same thing happens again, can you let us know the specific mobile device you're using so we can help you better with this?

Give it a try and let us know how it goes.

Thank you, it helped but not completely, the header is still sticking out of the form frame to the right.. the text in the header also has no margin on the left compared to the desktop display.

Hi Fisayo,

Can you try adding the code below:

.form-all:before {

    background-size: contain !important;

   }

Take a look at the screenshot of the result below:

Give it a try and let us know how it goes.

the issue with my header is now resolved. however,

Hi Fisayo,

As for your other question or concern, to avoid confusion, I've moved that to a new thread. You can check that out here.

Let us know if there’s anything else we can help you with.