SOLVED

Get Rid of Extra Padding in Form Fields - Desktop View

Go to solution
Anonymous
Not applicable

Get Rid of Extra Padding in Form Fields - Desktop View

I've created a form.  When I view it on a mobile device the field heights look fine.  However, when I view it on a desktop there is excess padding/height for the form fields on all browsers - IE, Chrome, Firefox.  

I've tried to edit the CSS of the form directly by adding custom CSS, as well as update it directly on the landing page via CSS styles in the header and in a separate style sheet.  These change the heights on the mobile version, but not the desktop version.  

What is controling the height of the form field in larger browser media widths?!

Example Page:  http://procampaigns.whitepages.com/test-respon.html

Custom CSS on the Form Itself AND Style Sheet updates I'm using:

.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 select.mktoField,
.mktoForm textarea.mktoField {
  -webkit-appearance: none;
  background-color:#fff;
  line-height:.6em !important;
  font-weight: normal; 
  color:#000;
  padding:4px !important;
  /*border:1px solid #aeb0b6;  
  box-shadow: 3px 3px 10px 0px #ccc;*/
}  
 
fieldset, form, label, legend {
margin: 0;
padding: 0 !important;
line-height: .6em !important;
border: 0;
}
form input.mktFormText,
.mktoForm .mktoTextField,
.mktoForm .mktoUrlField,
.mktoForm .mktoTelField,
.mktoForm .mktoEmailField {
/*background: #fff;
border: 1px solid #b6b6b6;
box-shadow: none;*/
font-size: .9rem !important;
padding: 4px !important;
line-height: .6em !important;
/*width: 100%;*/
}

Form Field Heights - Mobile Browser: 
0EM50000000SQzd.jpg

Desktop Form Field Heights

0EM50000000SQzi.jpg
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Get Rid of Extra Padding in Form Fields - Desktop View

What if you add this as a local Custom HTML element in the Landing Page Editor - and hardcode the height of the form fields?


<style type="text/css" >

.mktoField {
height: 35px;
}

</style>

View solution in original post

3 REPLIES 3
Anonymous
Not applicable

Re: Get Rid of Extra Padding in Form Fields - Desktop View

What if you add this as a local Custom HTML element in the Landing Page Editor - and hardcode the height of the form fields?


<style type="text/css" >

.mktoField {
height: 35px;
}

</style>

View solution in original post

Edward_Masson
Level 10

Re: Get Rid of Extra Padding in Form Fields - Desktop View

I can see that its 41px in height, this is coming from your Marketo form CSS. Are you able to add custom CSS?

0EM50000000SRCP.jpg
Anonymous
Not applicable

Re: Get Rid of Extra Padding in Form Fields - Desktop View

Kyle, the hard-coded style worked.  Thanks!