Landing page form placement in mobile

[Michelle_Schmid]

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.

[SanfordWhiteman]

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 · Accepted solution]

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;}
}