SOLVED

Landing page form placement in mobile

Go to solution
Michelle_Schmid
Level 2

Landing page form placement in mobile

Is there a way to specify location of a form on a guided landing page based on device, so that if a user were viewing the page on mobile, the form would be at the top?  Currently the form is displaying on the bottom in mobile.

1 ACCEPTED SOLUTION

Accepted Solutions
Dave_Roberts
Level 10

Re: Landing page form placement in mobile

The CSS 'order' property within a 'display:flex;' parent container will allow you to adjust the display order of items inside the container. https://www.w3schools.com/cssref/css3_pr_order.asp

 

Assuming you had some HTML like this (where the content comes before the form in the document):

<div style="display:flex;">
   <div class="contentElement">Some content here</div>
   <div class="mktoForm" id="Form" mktoName="Form"></div>
</div>

 

You can then use some responsive breakpoints and do something mobile-first in CSS like:

 

/* this will stack the form ABOVE the content */
div.mktoForm {order:0;}
div.contentElement {order:1;}

/* this will reverse the display order for tablet and desktop displays */
@media screen and (min-width:768px) {
   div.mktoForm {order:2;}
   div.contentElement {order:1;}
}

 

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Landing page form placement in mobile

Seems like a question of responsive design in general. Guided LP templates support any responsive CSS you want.

 

Within the form itself there can also be questions of responsiveness, but if you're talking about where the <form> element itself lands, that's up to how your mobile styles set the top/left/position/etc.

 

Anyway, you'd have to supply your URL if you want feedback on what you've got now.

Dave_Roberts
Level 10

Re: Landing page form placement in mobile

The CSS 'order' property within a 'display:flex;' parent container will allow you to adjust the display order of items inside the container. https://www.w3schools.com/cssref/css3_pr_order.asp

 

Assuming you had some HTML like this (where the content comes before the form in the document):

<div style="display:flex;">
   <div class="contentElement">Some content here</div>
   <div class="mktoForm" id="Form" mktoName="Form"></div>
</div>

 

You can then use some responsive breakpoints and do something mobile-first in CSS like:

 

/* this will stack the form ABOVE the content */
div.mktoForm {order:0;}
div.contentElement {order:1;}

/* this will reverse the display order for tablet and desktop displays */
@media screen and (min-width:768px) {
   div.mktoForm {order:2;}
   div.contentElement {order:1;}
}