Get 2 column form fields to be responsive to container

[Mike_TS]

We are trying to use on embedded form on various non-mkto pages, being held in various sized containers, and I am looking to figure out how to make the 2-column form either be a smaller width 2-column form, and for the larger container one - span the form/fields evenly to fit the width of the larger container. For example - this page should have a 2-column form just smaller fields to fit the container (https://marketo-conversion--marketing-stage.netlify.app/ontario-volleyball-association). This is the same form in a different container, and see how there is more whitespace to the right (https://marketo-conversion--marketing-stage.netlify.app/leagues-and-clubs/signup) - click on "Sign up for a Trial" on the top tabs. And since one field spans the 2 columns - its responsiveness is non-existent in both scenarios. 

[Jasbir_Kaur]

Hi @Mike_TS ,

For this page - https://marketo-conversion--marketing-stage.netlify.app/leagues-and-clubs/signup

Add this CSS --- 

.mktoFieldDescriptor.mktoFormCol {
    width: calc(100% / 2)!important;
    padding: 0 15px 0 0;
}

.mktoFormRow .mktoFormCol:nth-child(2) {
    padding: 0 !important;
}
.mktoFormCol:nth-last-child(2):first-child {
    width: 100% !important;
    padding: 0 !important;
}

And, Remove this CSS --- 

#mktoForm_1001.mktoForm .mktoFormCol {
    /* margin-right: 10px !important; */
    /* min-height: 0px !important; */
}

And, it will come like this - 

I'm checking the another one.

Thanks!

Jasbir

[Jasbir_Kaur]

For the

Add the below CSS ---

.mktoFieldDescriptor.mktoFormCol {
    width: calc(100% / 2)!important;
    padding: 0 15px 0 0;
}
.mktoFormRow .mktoFormCol:nth-child(2) {
    padding: 0 !important;
}
.mktoOffset {
    display: none !important;
}
.mktoFormCol:nth-last-child(2):first-child {
    width: 100% !important;
    padding: 0 !important;
}

** In the below add width: 100% - **

#mktoForm_1001.mktoForm input[type="text"], #mktoForm_1001.mktoForm input[type="url"], #mktoForm_1001.mktoForm input[type="email"], #mktoForm_1001.mktoForm input[type="tel"], #mktoForm_1001.mktoForm input[type="number"], #mktoForm_1001.mktoForm input[type="date"], #mktoForm_1001.mktoForm textarea.mktoField, #mktoForm_1001.mktoForm select.mktoField{
width: 100% !important;
}

And, Remove this CSS --- 

#mktoForm_1001.mktoForm .mktoFormCol
    /* margin-right: 10px !important; */
    /* min-height: 0px !important; */
}

And, it will show like this - 

Thanks!

Jasbir