Issue with mobile optimisation for landing page

[georgenichols]

Hi there, 

We're trying to launch a new landing page and we've adapted a template to get the effect we want. This brought with it a couple of issues on mobile devices, most of which we've managed to deal with. However, there are still a couple of things that we can't get to the bottom of. Here's a link to the page.

Which looks like this on a desktop: 

 

The issues we're struggling to fix are: 

1. Reducing spacing beetween blocks 

As you can see here: 

There is an excessive space between the first module 'What you get when sign up for our resources' and the top of the page. This looks worse on an actual mobile. This is also the case further down the page between the last block of text and the form: 

This is the lesser of the issues, the main problem we're experiencing is...

2. The form position/ resizing 

Basically we can't get the form to center on the page, it's always on the left hand side. Obviously this centering would need to be responsive but we can't work out what to do. The other option we'd be ok with would be for the form to match the sizes of the blocks above. 

Any help would be greatly appreciated. Do let me know if you need more info. 

George x 

[tjoyce · Accepted solution]

@georgenichols - 

1. to fix your form

@media screen and (max-width: 767px){
  .span12.widget-span.widget-type-form {
      max-width: 100% !important;
      margin: auto !important;
      width: calc(100% - 60px)!important;
  }
}

2. to fix the padding on top of the page:

@media screen and (max-width: 767px){
  div.overlay-wrapper {
    padding-top: 0;
  }
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[georgenichols · Accepted solution]

Hi! 

Thanks so much, both things very helpful. Still have too much padding between the bottom of the blocks of writing and the form. Any suggestions? 

George

[tjoyce · Accepted solution]

@georgenichols - 

1. to fix your form

@media screen and (max-width: 767px){
  .span12.widget-span.widget-type-form {
      max-width: 100% !important;
      margin: auto !important;
      width: calc(100% - 60px)!important;
  }
}

2. to fix the padding on top of the page:

@media screen and (max-width: 767px){
  div.overlay-wrapper {
    padding-top: 0;
  }
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[georgenichols · Accepted solution]

Hi! 

Thanks so much, both things very helpful. Still have too much padding between the bottom of the blocks of writing and the form. Any suggestions? 

George

[tjoyce · Accepted solution]

@media screen and (max-width: 767px){
  div.video-trigger {
      padding: 0;
  }
}