Issue with mobile optimisation for landing page

SOLVE
georgenichols
Member

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: 

 Example .5.png

 

The issues we're struggling to fix are: 

1. Reducing spacing beetween blocks 

As you can see here: Example 1.png

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: 

Example 2.png

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 

 

3 Accepted solutions

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@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.

View solution in original post

georgenichols
Solution
Member

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

View solution in original post

tjoyce
Solution
Recognized Expert | Platinum Partner
@media screen and (max-width: 767px){
  div.video-trigger {
      padding: 0;
  }
}

View solution in original post

3 Replies 3
tjoyce
Solution
Recognized Expert | Platinum Partner

@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.

View solution in original post

georgenichols
Solution
Member

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

View solution in original post

tjoyce
Solution
Recognized Expert | Platinum Partner
@media screen and (max-width: 767px){
  div.video-trigger {
      padding: 0;
  }
}

View solution in original post