Form Field Label Positioning Issue

smcgregor
Level 2

Form Field Label Positioning Issue

Hi! 

 

@Dave_Roberts - you were so helpful with my last question! If you have a spare minute, do you mind taking a look at this question, please? Thank you!

 

I am in the process of building out a marketo form and landing page - I went ahead and dropped the form onto the marketo LP and everything looks correct until I preview the LP.  When I am previewing, it is showing the field labels below the the blank field box where people will submit their answers.  I have tried two different CSS codes and have also tried altering the label settings in the form builder to no avail.  Has anyone had this happen by chance and if so, would love to hear how you resolved!

 

The form CSS I am using is:

 

 

.mktoForm, .mktoForm .mktoFieldWrap, .mktoForm .mktoHtmlText, .mktoForm input, .mktoLogicalField .mktoCheckboxList {width:100% !important;}
@media only screen and (min-width:480px) {
.mktoFormCol:first-child:nth-last-child(2), .mktoFormCol:first-child:nth-last-child(2) ~ .mktoFormCol {width: 100% !important;}
.mktoFormCol:first-child:nth-last-child(3), .mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {width: 50% !important;}
.mktoFormCol:first-child:nth-last-child(4), .mktoFormCol:first-child:nth-last-child(4) ~ .mktoFormCol {width: 33.3333% !important;}
.mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {padding-left: 0.3em !important;}
}
@media only screen and (max-width:480px) {.mktoFormCol {width:100% !important;}}
.mktoAsterix{display:none !important;}
.mktoForm .mktoGutter {display:none !important;}
.mktoButtonWrap {margin-left:0 !important;}
.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 {padding: 0.3em; width: 100% !important;}
.mktoForm {clear: both; margin-bottom: 0.3em;}
.mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList {float: left !important; width: auto !important;}
.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label {display: inherit !important;}
.mktoForm input[type="radio"], .mktoForm input[type="checkbox"] {width: auto !important;}
.mktoForm fieldset legend {margin: inherit !important;}

 

 

 

Thank you for the help!

1 REPLY 1
Dave_Roberts
Level 10

Re: Form Field Label Positioning Issue

Would you mind sharing a link to the approved version of the LP so I can check out the code and see what's going on there?