Making a form responsive in Marketo 2.0

[Anonymous]

Hi, I am trying to make a form responsive for mobile and tablets. Basically, I've got it to a certain point (text is wrapping to fit mobile), but the form I built is not centering the button properly. When viewed on my mobile, the yellow button shows on the right (rather than centered below the form's radio button q's).

Here is the css I used to override the form's css (I have ALSO turned on the mobile version of the Landing Page in which the form sits):

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField { 

    width:100% !important; 

} 

.mktoFormCol, .mktoFieldWrap {width:100% !important;} 

.mktoForm .mktoRequiredField label.mktoLabel { 

    font-weight:normal !important; 

} 

.mktoButtonRow { 

  width:100% !important; 

  text-align:center; 

} 

.mktoButtonRow .mktoButtonWrap Button {

  background:#eaaa00 !important;

  padding:10px 20px !important;

  font-size: 12px !important;

  -webkit-box-shadow: -3px 2px 10px 2px #ccc !important;

  -moz-box-shadow: -3px 2px 10px 2px #ccc !important;

  box-shadow: -3px 2px 10px 2px #ccc !important;

  border-color:#eaaa00 !important;

  font-color: #ffffff !important;

  font-family: Arial, sans-serif !important;

  color: #ffffff !important;

}

The images show the Desktop version, in which the button is more centered, and the mobile version, in which it is not centered.

Help is appreciated!

[Grégoire_Miche2]

Hi Tiki,

You would have to use some media queries to manage the mobile version.

I gather from what you are writing that you are using free-form landing pages ?

You should probably consider moving to guided (natively responsive) landing page templates. In these Guided LP, the form will be natively responsive.

-Greg

[Mark_Price]

Hi Tiki,

Having had a similar issue in the past it seems like the button's default  'padding-left' may be the problem (but it is hard to say without seeing the code / page).

If you can login to Marketo and look at the form, is the button centered within the editor?

If so, drag it to the left to remove a system default styling

^ it looks like it's centered, but it's really adding a padding-left CSS style.  Pull it to the left to undo this and rely on your CSS (which is probably working)

Hope it helps!

[Grégoire_Miche2]

Hi Mark,

Better make a small change to the form CSS, if yiou want my take

-Greg

[Mark_Price]

Nothing wrong with a media query to fix it.  I used to do it this way as well before figuring out what was adding 'padding-left: 120px;'  which is the issue.

Option 1:  remove the default CSS so that the button centers how it should (my suggestion)

Option 2:  write more CSS to then undo Marketo's bad CSS (Gregoire's solution)

hope it helps!