Re: Progressive Profiling Extra Spacing

jinawatson · ‎02-07-2023

Hi all - hoping someone can help. Our test form is adding extra space between the default fields and progressive profiling fields. Is there any way to have the spacing be the same as the default fields? Test page is linked and code is added below!

https://www.recastsoftware.com/test-marketo-forms-2/

/* Add your custom CSS below */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;700&display=swap');
    .mktoForm{
        max-width:100%!important;
        font-family: "Work Sans",sans-serif;
    }
    .mktoFrom *{font-family: "Work Sans",sans-serif!important;}
.mktoFormRow {
    width: 100%;
    float: none;
}
.mktoForm .mktoLabel {
    float: none!important;
}
.mktoFormCol,
.mktoFieldWrap {
width: 100% !important;
}
.mktoForm .mktoOffset {
    display: none!important;
}
.mktoFieldDescriptor.mktoFormCol {
    margin-bottom: 0px!important;
}
.mktoForm .mktoFieldWrap {
  float: left;
  position: relative;
}


.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 {
    width:100%!important;
    outline:none!important;
    padding:15px 15px 12px!important;
    border:1px solid #323e48!important;
    box-shadow: none!important;
    background-color:#f2f5f4!important;
    color:#323e48!important;
}

    .mktoLabel{
    font-family: "Work Sans",sans-serif;
    letter-spacing: .17px!important;
    line-height: 1.42!important;
    font-size: 16px!important;
    -webkit-transition: .2s all;
    transition: .2s all!important;
    cursor: text!important;
    color: #323e48!important;
    width: 100% !important;
    font-weight:normal!important;
}


.mktoForm .mktoGutter {
    display:none!important;
}
.mktoForm .mktoAsterix {
    display:none!important;
}
.mktoForm .mktoFormRow {
clear: none !important;
margin-bottom:2.2rem;
}
.mktoButtonRow{
    width:100% !important; 
    text-align: center !important;
}
.mktoButtonWrap.mktoInset {
    margin-left:0px !important;
}
.mktoButtonWrap{
    margin-left:0px !important;
}

#Number_of_Endpoints__c option:hover{
    background:#29abe2!important;
}

.mktoButton{
    line-height: 1.33;
    letter-spacing: .92px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Work Sans",sans-serif;
    font-weight: 700;
    border-radius: 4px!important;
    background: #29abe2!important;
    border: 2px solid #29abe2!important;
    color: #e0e4e1!important;
    padding: 0.5rem 1.2rem!important;
    box-shadow: none!important;
}
.mktoForm .mktoFormRow:nth-child(2) {
width: 49%;
float: left;
}

.mktoForm .mktoFormRow:nth-child(3) {
width: 49%;
float: left;
margin-left: 2%;
}
.mktoForm .mktoFormRow:nth-child(4) {
    width: 49%;
    float: left;
    }
    
    .mktoForm .mktoFormRow:nth-child(5) {
    width: 49%;
    float: left;
    margin-left: 2%;
    }

@media (max-width: 768px) {
.mktoForm .mktoFormRow {
    clear: both !important;
}

.mktoForm .mktoFormRow:nth-child(2) {
    width: 100%;
    float: left;
}

.mktoForm .mktoFormRow:nth-child(3) {
    width: 100%;
    float: left;
    margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(4) {
    width: 100%;
    float: left;
}

.mktoForm .mktoFormRow:nth-child(5) {
    width: 100%;
    float: left;
    margin-left: 0;
}
}
mktoHtmlText.mktoHasWidth{
        width:100%!important;
        color:#323e48 !important;
        font-size:16px!important;
    }

.mktoForm .mktoFormRow:nth-child(9) {
width: 49%;
float: left;
margin-left: 2%;
margin:1em 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
    width: 49%;
    float: left;
    margin:1em 0;
    }
    
    .mktoForm .mktoFormRow:nth-child(11) {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin:1em 0;
    }
    .mktoForm .mktoFormRow:nth-child(12) {
    width: 49%;
    float: left;
    margin:1em 0;
    }
    .mktoForm .mktoFormRow:nth-child(8) .mktoLabel, .mktoForm .mktoFormRow:nth-child(9) .mktoLabel,
    .mktoForm .mktoFormRow:nth-child(10) .mktoLabel, .mktoForm .mktoFormRow:nth-child(11) .mktoLabel, .mktoForm .mktoFormRow:nth-child(12) .mktoLabel {
        margin-left:20px;
        padding-top:0px!important;
    }
.mktoCheckboxList input {
    opacity: 0;
    position: absolute;   
}

.mktoCheckboxList input, .mktoCheckboxList label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.mktoCheckboxList label {
    position: relative;
}

.mktoCheckboxList input + label:before {
    content: '';
    background: #fff;
    border: 1px solid #323e48;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
    border-radius: .2em;
    margin-top: 5px;
}
.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label{
    margin-left:0!important;
}
.mktoCheckboxList input:checked + label:before{
    background:#29abe2;
    border:1px solid #29abe2;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth{
    width:20px!important;
}

.mktoCheckboxList input:checked + label:after {
    content: "";
    background: url('https://www.recastsoftware.com/wp-content/uploads/2021/02/Asset-1-1.svg');
    color: #fff;
    position: absolute;
    top:10px; 
    left:5px;
    padding:6px;
}
@media (max-width: 768px) {
    .mktoForm .mktoFormRow:nth-child(8) {
    width: 100%;
    float: left;
}

.mktoForm .mktoFormRow:nth-child(9) {
    width: 100%;
    float: left;
    margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
    width: 100%;
    float: left;
}

.mktoForm .mktoFormRow:nth-child(11) {
    width: 100%;
    float: left;
    margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(12) {
    width: 100%;
    float: left;
}
}
.mktoButtonWrap.mktoSimple {
    margin-left:0px!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 select.mktoField, .mktoForm textarea.mktoField {
    height:50px;
}
.mktoHtmlText.mktoHasWidth, .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{
    font-family: "Work Sans",sans-serif;
letter-spacing: .17px !important;
line-height: 1.42 !important; font-size:17px!important}
.mktoHtmlText.mktoHasWidth{width:100%!important;}

SanfordWhiteman · ‎02-07-2023

OK. First, it’s not advisable to have all that Custom CSS (especially, as we’ll see below, with that level of field-level dependency, entered in Form Editor. It’s infinitely more maintainable to have an external CSS file.

Second, the style isn’t related to Progressive Profiling per se. It’s just that the hidden fields happen to match these overly precise selectors:

.mktoForm .mktoFormRow:nth-child(9) {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin: 1em 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
    width: 49%;
    float: left;
    margin: 1em 0;
}

.mktoForm .mktoFormRow:nth-child(11) {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin: 1em 0;
}
.mktoForm .mktoFormRow:nth-child(12) {
    width: 49%;
    float: left;
    margin: 1em 0;
}

It’s the top margin on those that adds up and pushes the first visible ProgPro field down.

I’d drastically redo the way you’ve built these custom styles, it’s really precarious!

View solution in original post

SanfordWhiteman · ‎02-07-2023

OK. First, it’s not advisable to have all that Custom CSS (especially, as we’ll see below, with that level of field-level dependency, entered in Form Editor. It’s infinitely more maintainable to have an external CSS file.

Second, the style isn’t related to Progressive Profiling per se. It’s just that the hidden fields happen to match these overly precise selectors:

.mktoForm .mktoFormRow:nth-child(9) {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin: 1em 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
    width: 49%;
    float: left;
    margin: 1em 0;
}

.mktoForm .mktoFormRow:nth-child(11) {
    width: 49%;
    float: left;
    margin-left: 2%;
    margin: 1em 0;
}
.mktoForm .mktoFormRow:nth-child(12) {
    width: 49%;
    float: left;
    margin: 1em 0;
}

It’s the top margin on those that adds up and pushes the first visible ProgPro field down.

I’d drastically redo the way you’ve built these custom styles, it’s really precarious!

jinawatson · ‎02-07-2023

Thank you @SanfordWhiteman! I didn't write the CSS, an implementation team did so no really sure of their thought process on everything.