Landing page form placement in mobile | Community
Skip to main content
Michelle_Schmid
Michelle_Schmid
Level 2
September 14, 2020
Solved

Landing page form placement in mobile

  • September 14, 2020
  • 2 replies
  • 2136 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

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

 

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
September 14, 2020

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
Dave_RobertsAccepted solution
Level 10
September 15, 2020

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

 

    Terms & ConditionsAccessibility statement

    Loading footer...