Get 2 column form fields to be responsive to container

Question

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.

Jasbirka · Answer

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded