Form is not mobile friendly

Devla
Member

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

0 Upvotes
1 Reply 1
StjepanGrcic
Contributor | Platinum Partner

Hi @Devla 

Think the problem is in your code. 

 

You can always inspect it using your browser developer tools. 

 

hcom.JPG

 

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