Form creates line break between each label/field on mobile | Community
Skip to main content
A
Anonymous
January 20, 2015
Solved

Form creates line break between each label/field on mobile

  • January 20, 2015
  • 5 replies
  • 1895 views
Hi! I'm noticing an issue where my forms look perfect on desktop, but when switched to mobile each form label and form field gets broken into 2 lines instead of staying in 1 line as it normally does. Does anyone know how to fix this? 

Thanks,
Elaine
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 Casey_Grimes2
There are some specific media queries called in forms2.css that handle this behavior; simply add your own media queries to override Marketo's default behavior.

5 replies

Tim_Langlois1
Tim_Langlois1
Level 4
January 21, 2015
Hi Elaine,

It's hard to say without seeing it, but edit your form and try changing the label position  to be above instead of left in your form settings. (Form Settings > Label Position field > select Above). If you already have labels above, you may need to reduce your form field width. 
A
Anonymous
January 21, 2015
Hi Elaine

I undarstand your issue.
I try to fix it, but not yet.
I think it related to forms2.js and browser's user agent.
The issue is raised at iPhone and not raised at iPad.
See below

iPhone6 plus with iOS8.1


iPad with iOS8.1
A
Anonymous
January 21, 2015
Takehiro, that's so interesting! Please let me know if you come up with a solution. I've tried fiddling around with field label and input margin, padding and width and nothing did the trick. Thanks! 
Casey_Grimes2
Casey_Grimes2Accepted solution
Level 10
January 21, 2015
There are some specific media queries called in forms2.css that handle this behavior; simply add your own media queries to override Marketo's default behavior.
A
Anonymous
January 21, 2015
Thanks Courtney! That solved it! 
 
Terms & ConditionsAccessibility statement

Loading footer...