Form Display on Mobile Phone

[Anonymous]

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.

[Anonymous]

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">

[Anonymous]

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.

 

[Anonymous]

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

[Anonymous]

Hi Kenny,

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

[Dave_Roberts]

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".