Form is not mobile friendly

[Devla]

Hello, I have a problem of embeded form not being mobile friendly.

The form is on the link https://benefiti.rs/contacts.

Report from Google Search Console is here https://search.google.com/test/mobile-friendly/result?id=3qs136DTClwYMtkrwovRMw

I tried several solutions and even some that were noted here but no luck in solving it.

Thank you,

Vladimir

[indyandi]

I am not a coder and tried to enter the code in the first box above in the Stylesheet and it didn't work. My form works fine on desktop, but in mobile, you have to exit the mobile mode to see the form fields. I am not sure where exactly to try to put the text in the 2nd suggestion above (the red text). Do I do that in Developer Tools in my browser? Or in Wordpress? Thanks.

[StjepanGrcic · Accepted solution]

Hi @Devla 

Think the problem is in your code. 

You can always inspect it using your browser developer tools. 

The issue might be due to the fixed position of the form, then you need to change CSS in media queries.

Please add below CSS code in your page stylesheet.

@media (max-width: 767px) {
    .main-content {
         position: static !important;
     }
}

or 

Set HubSpot form to render inside a "div" (short for divider) which has an ID of divFormHolder.

You will need to add the code in red where you've embedded your form.

<div id="divFormHolder">
  <!--[if lte IE 8]>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" defer></script>
  <![endif]-->
  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" defer></script>
  <script>
    window.onload = function() {
        hbspt.forms.create({
             portalId: 'XXXXXXX',
             formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
             target: "#divFormHolder",
        });
    };
  </script>
</div>  

Hope some of this helps you. If you solve your problem please mark it solved.

Cheers,

Stjepan