Landing Page Mobile Optimization Issues (Forms)

[Kathleen_Light]

Hi there!

I'm having some issues with the mobile optimization of a landing page. I've created it from a template but edited the template. I'm new to Hubspot and I'm not used to the fact that we're not able to see the mobile version on the page while working. 

My issue is that everything looks okay on desktop but the forms, in particular, look terrible on mobile.

Would someone be able to help me out please?

Thank you in advance!

This is the page: http://coteacher-8056824.hs-sites.com/?hs_preview=ijfLEBUL-32593223328

[Kevin-C · Accepted solution]

Hey @Kathleen_Light 

I'm assuming you're referring to the "pre-lauch coteacher community" form?

If that's the case you can see in the image below that you've got 2 inline padding properties set. You can see the form as it is today and without the properties set below.  I would remove the inline styling and use a class to handle this, or update the drag and drop template using empty columns rather than hard coded padding or margins.

CurrentW/O padding

Also when editing the content of your page you can see it in a mobile view, just follow these steps:

1. Click the preview button under the publich button
   
2. Click the device viewport you would like to preview. Located on the top right
   

Hope this helps get you going in the right direction!!