Form Display on Mobile Phone

Highlighted
Anonymous
Not applicable

Form Display on Mobile Phone

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.
Tags (1)
5 REPLIES 5
Highlighted
Anonymous
Not applicable

Re: Form Display on Mobile Phone

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">
Highlighted
Anonymous
Not applicable

Re: Form Display on Mobile Phone

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.

 

Highlighted
Anonymous
Not applicable

Re: Form Display on Mobile Phone

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
Highlighted
Anonymous
Not applicable

Re: Form Display on Mobile Phone

Hi Kenny,

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

Highlighted
Level 6

Re: Form Display on Mobile Phone

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.

Screenshot_081018_104038_AM.jpg

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

Screenshot_081018_105045_AM.jpg