Solved
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:
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;
/*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:
Desktop Form Field Heights
Form Field Heights - Mobile Browser:
Desktop Form Field Heights