Form creates line break between each label/field on mobile

[Anonymous]

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

[Anonymous]

Thanks Courtney! That solved it! 
 

[Casey_Grimes · Accepted solution]

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.

[Anonymous]

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! 

[Anonymous]

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

[Tim_Langlois1]

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.