Form Display on Mobile Phone | Community
Skip to main content
A
Anonymous
January 12, 2015
Question

Form Display on Mobile Phone

  • January 12, 2015
  • 5 replies
  • 2285 views
I am using a Marketo Form for my preference center landing page (http://preferences.discoveryco.com/manage). It looks good on a desktop, but on mobile phone it appears distorted. The checkboxes and field label are on separate lines and the spacing is distorted. Any idea how to fix this? I tried adding some CSS floats but it doesn't seem to be working.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

A
Anonymous
January 12, 2015
I would try adding the meta tag below above the </head> tag in the HTML, and see if it fixes this:
<meta name="viewport" content="width=device-width, initial-scale=1">
A
Anonymous
January 13, 2015

Hi Murtza,

Thanks for the suggestion. I tried this and it did not fix the issue. It just changed the initial zoom when I first view the page.

 

A
Anonymous
January 13, 2015
This is because Forms 2.0 has default media queries for responsive design that get applied to the form.  I submitted an idea to allow us to disable the default media queries, so we can use our own.

My idea: https://community.marketo.com/MarketoIdeaDetail?id=08750000000JlLwAAK
A
Anonymous
January 14, 2015

Hi Kenny,

That seems to be what is happening. Is there any possible ways to override this?

Dave_Roberts
Dave_Roberts
Level 10
August 10, 2018

It looks like you're using a combination of the "checkbox" field type with a "html-text" element as the labels. I've added a few arrows to point out that you've got this setup in 2 columns right now instead of one and I think that's why it's breaking to full-width on mobile (each on their own line). There is a rule which is making the .mktoHtmlText element 100% wide, so that's also complicating the issue here.

You might want to try using the checkboxES field type instead of the "checkbox" field. This will give you the option to add text to the right side of the checkbox element so you don't have to do any custom styling or use the htmlText there. You'll want to add the text you'd like to show up on the form to the "Display Value" and the data you want passed to the server to the "Stored Value".

Terms & ConditionsAccessibility statement

Loading footer...