Landing page with form - mobile responsive

[OSerrano-Pied]

Hello community!

I have created a landing page with a form. Now, the form I have placed it on the right side on the fold. So have of the form is on the banner area and half more on the body section. I am attaching an example.

The problem is that on mobile version:

1. If I put the form a bit over the banner zone on desktop, on mobile it overlaps with the text from the body section.

2. On mobile the body section is above the form, and I would like for the form to be above the text, so first thing users see on mobile is headline and then the form.

Here is an example of how I would like it to be for desktop and mobile: https://go.nauto.com/roadmap-for-a-safer-and-smarter-fleet-ebook.html

Many thanks in advance!

[OSerrano-Pied]

Ok got it, many thanks!!

[alyssamwilie · Accepted solution]

The media query is part of the CSS code I provided:

@media (max-width: 768px) {
}

You wouild need to place the code either in a stylesheet connected to your landing page or within a style block in your landing page's Head HTML (found in the Advanced section of your page's Settings). And, again, you would need to update the code I provided with the classes your page is using else it won't work. If you aren't familiar with CSS or classes you may need a developer's help.

[OSerrano-Pied]

Hello Alyssa, many thanks for your answer!

So, I would have to add it in the media query of the landing page...inside of Hubspot?

[alyssamwilie]

This would require some CSS. You can change the order of columns by making the container a flex-box with a direction of column, then set the preferred order on each column. Then to move the form out of the hero you would remove the negative positioning from it (whether that's absolute, relative, or just a negative margin). All of that you would place inside a media query for mobile isntances. I would need to see your page to give an accurate snippet but here's an example:

@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .container .body {
    order: 2;
  }

  .contanier .form {
    order: 1;
    position: static;
    margin-top: 0;
    top: 0;
  }
}