Form creates line break between each label/field on mobile

5 replies
1933 views
Translate All

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.

Casey_Grimes2Accepted solution

Level 10

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.

Tim_Langlois1

Level 4

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.

Translate

A

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

Translate

A

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!

Translate

Casey_Grimes2Accepted solution

Level 10

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.

Translate

A

Anonymous

Thanks Courtney! That solved it!

Translate

Sign up

Login with SSO

Login to the community

Login with SSO