Logo Cut Off in Mobile View

Hi,
I see this is a common problem and I've attempted to self-serve with some of the custom CSS reccos that I've seen in other Help Forums, but it doesn't seem to work for me.
Can you help me with the CSS that's needed to make my logo work in mobile?

Thank you!

Hi Emily,

Thanks for reaching out to Jotform Support. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue. I also tried to open the form using an actual mobile device, and it's still the same. You can see what I mean in this screenshot:

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you as soon as I can.

Hi Emily,

When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how:

1. In Form Builder, click the Paint Roller icon on the right side of the page.
2. Go to the Styles tab.
3. Scroll down a bit, and paste this code in the Inject Custom CSS area.

}

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

#formCoverLogo > div {

    flex-direction: column !important;

}





#formCoverLogo > div > img {

    margin: 0 auto; 

}

You can clone my test form here to see the Injected CSS code and to do more tests on it. You might also want to check out this guide about How to Inject Custom CSS Codes.

Give it a try and reach out again if you have any other questions.