4 Replies Latest reply on Nov 2, 2017 8:12 AM by Mark Price

    Making a form responsive in Marketo 2.0

      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!