Landing Page Mobile Optimization Issues (Forms)

SOLVE
Kathleen_Light
Member

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

1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Recognized Expert | Partner

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.

 

CurrentCurrentW/O paddingW/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
    Screeenshot - 2020-07-21 at 4.01.09 PM.png
  2. Click the device viewport you would like to preview. Located on the top right
    Screeenshot - 2020-07-21 at 4.01.25 PM.png

 

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

View solution in original post

1 Reply 1
Kevin-C
Solution
Recognized Expert | Partner

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.

 

CurrentCurrentW/O paddingW/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
    Screeenshot - 2020-07-21 at 4.01.09 PM.png
  2. Click the device viewport you would like to preview. Located on the top right
    Screeenshot - 2020-07-21 at 4.01.25 PM.png

 

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

View solution in original post